快速业务通道

ASP.NET&Javascript实现半透明背景&模式弹出个性化页面实例

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-20

开发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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号