Tuesday, 10 May 2016

Open Model Popup using jquery


first add below js and css into your page.


1) jquery-{version}.js
2) bootstrap-model.js
3) bootstrap-model.css
4 ) bottstrap.min.css

Add below html code into your page.

   <div class="popupindex modal" id="mdProcesserror" style="top: 46% !important; margin-top: -281px;">
        <div class="modal-content" style="width: 169%; margin-left: -40%; ">
            <a href="#" data-dismiss="modal" class="popupmodel_close" onclick="resetModelPopUp()"> </a>
            <div class="modal-body">
                <div id="ProcesserrorBody">
                  Content Of Body
                </div>
            </div>

        </div>
    </div>


Add below styles


.popupindex.modal {
    width: 595px;
}
.popupmodel_close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: transparent url("../../../content/images/close.png") -40px 0px;
    cursor: pointer;
    z-index: 1103;
}

to open model popup when click on link button

  <a href="#" onclick="javascript: $('#mdProcesserror').modal();">Model Popup</a>




No comments:

Post a Comment