Bootstrap Modal Dialog in ASP.NET 4.5

[KGComputers]

Here's a simple demo on using bootstrap modal dialog in asp.net 4.5 webforms. First is to reference jquery, bootstrap.min.css and bootstrap.min.js in your aspx markup.

<script src="Scripts/jquery-1.11.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Content/bootstrap.min.js"></script>

Next is to define a modal dialog using containers. In my example, I'm using the asp.net panel.

<asp:Panel ID="pnlModal" runat="server" role="dialog" CssClass="modal fade">
    <asp:Panel ID="pnlInner" runat="server" CssClass="modal-dialog" >
        <asp:Panel ID="pnlContent" CssClass="modal-content" runat="server">
            <asp:Panel runat="server" class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Bootstrap Modal Dialog in ASP.NET</h4>
            </asp:Panel>
            <asp:panel runat="server" class="modal-body">
               <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum.
               </p>
             </asp:panel>
            <asp:panel runat="server" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </asp:panel>
        </asp:Panel>
    </asp:Panel>
</asp:Panel>

Lastly, I added an asp.net button to render the modal dialog to the browser. I added return false to the onclientclick to prevent triggering of postback.

<asp:Button ID="btnShowModal" runat="server" Text="Show Modal" CssClass="btn btn-primary btn-info" data-target="#pnlModal"
              data-toggle="modal" OnClientClick="javascript:return false;"/>

On Page Load, button is rendered to the browser.


When button is clicked, show the bootstrap modal dialog:


KGC

[Zorger]

Hi, it looks promising and am going to try it out.

[Zorger]

Hi, it looks promising and am going to try it out.

[pbickford]

The example is great, but needs tweaking if you want to use it with master pages. See
https://pbickford.wordpress.com/2015...-master-pages/

Thanks for the great post!
-Pete

[KGComputers]

Hi Pete,

Great example on using with masterpage...

KGC