1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head runat="server">
5: <title></title>
6: <style type="text/css">
7: .modal-inner-wrapper
8: {
9: width:340px;
10: height:340px;
11: background-color:Gray;
12: }
13: .modal-inner-wrapper .content
14: {
15: width:320px; height:320px; background-color:#FFFFFF; border: solid 1px Gray; z-index:9999;
16: float:right; margin-top:10px; margin-right:10px;
17: }
18: .modal-inner-wrapper .content .close
19: {
20: float:right;
21: }
22: .modal-inner-wrapper .content .body
23: {
24: margin-top:20px;
25: }
26: .rounded-corners
27: {
28: /*FOR OTHER MAJOR BROWSERS*/
29: -moz-border-radius: 5px;
30: -webkit-border-radius: 5px;
31: -khtml-border-radius: 5px;
32: border-radius: 5px;
33: /*FOR IE*/
34: behavior: url(border-radius.htc);
35: }
36: .rel {
37: position: relative;
38: z-index: inherit;
39: zoom: 1; /* For IE6 */
40: }
41: .modal-bg{
42: background-color:Gray;
43: filter:alpha(opacity=50);
44: opacity:0.6;
45: z-index:999;
46: }
47: .modal{
48: position:absolute;
49: }
50: </style>
51: </head>
52: <body>
53: <form id="form1" runat="server">
54: <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
55: <asp:Button ID="Button1" runat="server" Text="Show Modal" />
56: <asp:Panel ID="pnlModal" runat="server" CssClass="modal">
57: <div class="rel">
58: <div class="modal-inner-wrapper rounded-corners">
59: <div class="content rounded-corners">
60: <div class="close">
61: <asp:LinkButton ID="btnClose" runat="server">close</asp:LinkButton>
62: </div>
63: <div class="body">
64: <p>I want beer!</p>
65: </div>
66: </div>
67: </div>
68: </div>
69: </asp:Panel>
70: <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modal-bg"
TargetControlID="Button1"
PopupControlID="pnlModal"
CancelControlID="btnClose" >
71: </asp:ModalPopupExtender>
72: </form>
73: </body>
74: </html>