快速业务通道

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

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

    开发Web应用时,经常会有弹出模式对话框的情况,可以直接调用window.showModalDialog()方法,一般情况就可以了。

    但有一些应用场景,需要我们弹出一些自定义控件或页面,同时用一层半透明的背景将页面的其他地方遮住,以防止用户的其他操作,以达到一种“模式窗口”的效果,这里给出一个实现此类效果,同时支持弹出自定义控件页面中通过委托更新主页面的操作功能,当然,此应用支持IE和FireFox两种浏览器。

 
详细代码脚本及页面代码如下:

<!--[endif]-->

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&

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站: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号