在弹出窗口中加载页面

　　弹出窗口，加载页面。弹出窗口初始位置为居中。可在关闭窗口时，回调主页面按钮。要求jquery。

  1. 效果演示
    首先，演示主窗口两个按钮作用。然后，演示关闭弹出窗口时，调用主窗口的两个按钮。（点我下载示例代码）
  2. 主要代码（时间仓促，没加注释，不过代码很简单，就是创建几个元素拼在一起，每个元素都用var=标明了）
 1 var _divMask;
 2 var _divBox;
 3 
 4 function ShowMask() {
 5     var divMask = $('<div></div>')
 6         .attr("id", "divMask")
 7         .css({
 8             "position": "absolute",
 9             "left": "0",
10             "top": "0",
11             "width": "100%",
12             "height": "100%",
13             "backgroundColor": "gray",
14             "opacity": "0.4"
15         }).appendTo("body");
16     _divMask = divMask;
17     return divMask;
18 }
19 
20 function ShowBox(title, url, width, height) {
21     ShowMask();
22     var divBox = $("<div></div>")
23         .attr("id", "divBox")
24         .css({
25             "position": "absolute",
26             "top": (($(document).height() - height) / 2) < 0 ? 0 : (($(document).height() - height) / 2),
27             "left": (($(document).width() - width) / 2),
28             "width": width,
29             "height": height,
30             "border": "2px solid gray",
31             "backgroundColor": "white"
32         })
33         .appendTo("body");
34     var pTitle = $("<p></p>")
35         .css({
36             "width": (width - 20) / 2,
37             "float": "left",
38             "padding": "5px",
39             "margin": "0"
40         })
41         .text(title)
42         .appendTo(divBox);
43     var pClose = $("<p></p>")
44         .css({
45             "width": (width - 20) / 2,
46             "float": "left",
47             "text-align": "right",
48             "padding": "5px",
49             "margin": "0"
50         })
51         .appendTo(divBox);
52     var aClose = $("<a></a>")
53         .css({
54             "color": "black",
55             "text-decoration": "none"
56         })
57         .attr("href", "javascript:CloseBox();")
58         .text("关 闭")
59         .appendTo(pClose);
60     var hr = $("<hr/>")
61         .css({
62             "margin": "0",
63             "border": "1px solid gray"
64         })
65         .appendTo(divBox);
66     var iframeContainer = $("<iframe></iframe>")
67         .attr("id", "divContainer")
68         .css({
69             "width": width,
70             "height": height - 13 - pTitle.height(),
71             "float": "left",
72             "overflow": "auto",
73             "border": "0"
74         })
75         .attr("src", url)
76     .appendTo(divBox);
77     _divBox = divBox;
78     //divBox.draggable({ handle: "p" });
79 }
80 
81 function CloseBox(btn) {
82     if (_divMask == null) {
83         if (btn != null && btn != '') {
84             parent.document.getElementById(btn).click();
85         }
86         $(parent.document.getElementById("divMask")).remove();
87         $(parent.document.getElementById("divBox")).remove();
88     }
89     else {
90         _divMask.remove();
91         _divBox.remove();
92     }
93 }
 1 namespace hylbox
 2 {
 3     public static class BoxHelper
 4     {
 5         public static void ShowBox(Page page, string title, string url, int width, int height)
 6         {
 7             string scriptStr = string.Format("ShowBox('{0}','{1}',{2},{3})", title, url, width, height);
 8             ScriptManager.RegisterClientScriptBlock(page, page.GetType(), "showBox", scriptStr, true);
 9         }
10 
11         public static void CloseBox(Page page, string btn)
12         {
13             string scriptStr = string.Format("CloseBox('{0}')", btn);
14             ScriptManager.RegisterClientScriptBlock(page, page.GetType(), "closeBox", scriptStr, true);
15         }
16     }
17 }

 

posted @ 2014-07-27 23:48  David Huang  阅读(874)  评论(0)  编辑  收藏  举报