Bootstrap Modal Dialog in ASP.NET 4.5

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.

Code:

---

<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.

Code:

---

<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.

Code:

---

<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.
Attachment 118695

When button is clicked, show the bootstrap modal dialog:
Attachment 118697

KGC

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

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

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

Hi Pete,

Great example on using with masterpage... :)

KGC