Add Responsive Model Popup using Twitter Bootstrap in Asp.Net

In this tutorial, we study how to add responsive model popup using twitter bootstrap in ASP.NET website.
To add model popup, first download required javascript and css from twitter  bootstrap website or you can get both JavaScript and CSS from My Demo website and add Script and CSS in your Web Page as follow.

<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/model.min.js" type="text/javascript"></script>
<link href="css/model.min.css" rel="stylesheet" type="text/css" />

Size of CSS and JavaScript
model.min.cs - 16KB
model.min.js - 4KB

Now, to add model popup with LinkButton and Panel Control use below code -

 <!-- Button to trigger modal -->      
        <asp:LinkButton href="#myModal" role="button" class="btn" data-toggle="modal" ID="LinkButton1" runat="server">Launch demo modal</asp:LinkButton>
        <!-- Modal -->
       
        <asp:Panel class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true" ID="myModal" runat="server">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3 id="H1">
                    Modal header</h3>
            </div>
            <div class="modal-body">
                <p>
                    One fine body…</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">
                    Close</button>
                <button class="btn btn-primary">
                    Save changes</button>
            </div>
        </asp:Panel>

Demo

Download Complete Source Code