Bootstrap model Jquery Asp.net

Bootstrap model is lightweight responsive model Popup .It can easily customizable. Bootsrap model consist three part header ,body and footer.Bootstrap  model we can show the  images, video and documents.So in this tutorial we will learn to use bootstrap model

The following example is given below

Trigger the Model, you need to click button or link button to open popup. So here is markup

            <a href="#" class="btn btn-success"   data-toggle="modal"    data-target="#pnlModal ">show Modal</a>

here we can use two attribute named  data-toggle(bootstarp tell what to do)  and data target(id of model to show)

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

Here is the markup of bootstrap model

<div class="modal fade">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                            <h4 class="modal-title">Modal title</h4>

                        </div>

                        <div class="modal-body">

                            <p> body</p>

                        </div>

                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                            <button type="button" class="btn btn-primary">Save </button>

                        </div>

                    </div>

                    <!-- /.modal-content -->

                </div>

                <!-- /.modal-dialog -->

            </div>

Loading the data remote content

            <a href="#" class="btn btn-success"   data-toggle="modal"    data-target="#pnlModal" data-remote="data/handler.ashx" >show Modal</a>

Here data-remote attribute get the date server side and display model body

Javascript shown and hide  Bootstrap modal

$('#pnlModal).modal('show') and

$('#pnlModal).modal(hide)