Sunday, September 14, 2014

Formatting ASP.NET Panel as Bootstrap Modal Dialog

Here's how you make use of the asp.net panel container that will serve as modal dialog. During render, panel will be converted to div elements.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>

Make sure to download the bootstrap files and reference them to your asp.net project.
1
2
3
<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>

0 comments:

Post a Comment