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

最新推荐文章于 2021-05-31 16:45:17 发布

原创

最新推荐文章于 2021-05-31 16:45:17 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #asp.net #function #server #div #asp

本文介绍如何使用ASP.NET和JavaScript创建一个具有半透明背景的模式弹出窗口，实现类似对话框的效果，同时支持自定义内容和在弹出窗口中更新主页面的操作。该实现兼容IE和Firefox浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

a) CSS 样式： Base.css 文件

div.Container { width:700px; min-height:300px; border:solid 1px #003366; background-image:url(/images/PopupBG.gif); background-repeat:repeat-x; background-color:#d9e1e8; } div.Content { width:640px; min-height:280px; margin-left:30px; margin-top:20px; } div.ShieldBG { background-color:Gray; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;} div.ItemRow { display:inline; }

b) Javascript 脚本： PositionCaculate.js 文件

// // Object for parameters. var MemberParameters = { // Id of container div. ContainerDivId: "div_Container", // Id of ShieldBG. ShieldBGId : "div_ShieldBG", // Class Name of ShieldBG. ShieldBGClassName: "ShieldBG", // Number of z-index of ShieldBG. ShieldBGZIndex: 100, // Whether scroll tag. IsScroll: false, // Default space for pop-up layout to left and top. DefaultSpace: 50 }; // // Object for logical modules. var LogicalModules = { // // Show up the content layout. PopUpContainerDiv: function() { // Init. var objContainerDiv = document.getElementById(MemberParameters.ContainerDivId); // Check. if (objContainerDiv == null || objContainerDiv.parentNode == null) return false; // Set the style of container. objContainerDiv.style.position = "absolute"; objContainerDiv.style.zIndex = MemberParameters.ShieldBGZIndex + 1; // Show the content layout. objContainerDiv.style.display = ""; // Show up orCreate a new bg div and set the style. var objShieldBg = document.getElementById(MemberParameters.ShieldBGId); if (objShieldBg != null) { objShieldBg.style.display = ""; } else { var objNewDiv = document.createElement("DIV"); objNewDiv.setAttribute("id", MemberParameters.ShieldBGId); objNewDiv.style.position = "absolute"; objNewDiv.style.zIndex = MemberParameters.ShieldBGZIndex; objNewDiv.style.top = "0px"; objNewDiv.style.left = "0px"; // Set the class name. objNewDiv.className = MemberParameters.ShieldBGClassName; // Append it. objContainerDiv.parentNode.appendChild(objNewDiv); } // // Caculate the width and height. this.CaculateWidthAndHeight(); //// If you want to keep the layout on the changeless position, use this. // Add the reflesh events. // this.AddScrollEvent(); //// },