开发Web应用时,经常会有弹出模式对话框的情况,可以直接调用window.showModalDialog()方法,一 般情况就可以了。
但有一些应用场景,需要我们弹出一些自定义控件或页面,同时用一层半透明的背景将页面的其他地 方遮住,以防止用户的其他操作,以达到一种“模式窗口”的效果,这里给出一个实现此类效果,同时支 持弹出自定义控件页面中通过委托更新主页面的操作功能,当然,此应用支持IE和FireFox两种浏览器。
?聾旗鷹重云式匈中旗鷹泌和?
a)CSS劔塀?Base.css猟周
1 div.Container { width:700px; min-height:300px; border:solid 1px #003366; background-image:url(/images/PopupBG.gif); background-repeat:repeat-x; background-color:#d9e1e8; }
2 div.Content { width:640px; min-height:280px; margin-left:30px; margin-top:20px; }
3 div.ShieldBG { background-color:Gray; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
4 div.ItemRow { display:inline; }
b)Javascript重云?PositionCaculate.js猟周
1 //
2 // Object for parameters.
3 var MemberParameters = {
4 // Id of container div.
5 ContainerDivId: "div_Container",
6 // Id of ShieldBG.
7 ShieldBGId : "div_ShieldBG",
8 // Class Name of ShieldBG.
9 ShieldBGClassName: "ShieldBG",
10 // Number of z-index of ShieldBG.
11 ShieldBGZIndex: 100,
12 // Whether scroll tag.
13 IsScroll: false,
14 // Default space for pop-up layout to left and top.
15 DefaultSpace: 50
16 };
17
18 //
19 // Object for logical modules.
20 var LogicalModules = {
21 //
22 // Show up the content layout.
23 PopUpContainerDiv: function() {
24 // Init.
25 var objContainerDiv = document.getElementById(MemberParameters.ContainerDivId);
26 // Check.
27 if (objContainerDiv == null || objContainerDiv.parentNode == null)
28 return false;
29 // Set the style of container.
30 objContainerDiv.style.position = "absolute";
31 objContainerDiv.style.zIndex = MemberParameters.ShieldBGZIndex + 1;
32 // Show the content layout.
33 objContainerDiv.style.display = "";
34 // Show up orCreate a new bg div and set the style.
35 var objShieldBg = document.getEl
|