3 Attachment(s)
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">×</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
Re: Bootstrap Modal Dialog in ASP.NET 4.5
Hi, it looks promising and am going to try it out.
Re: Bootstrap Modal Dialog in ASP.NET 4.5
Hi, it looks promising and am going to try it out.
Re: Bootstrap Modal Dialog in ASP.NET 4.5
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
Re: Bootstrap Modal Dialog in ASP.NET 4.5
Hi Pete,
Great example on using with masterpage... :)
KGC