65.9K
CodeProject 正在变化。 阅读更多。
Home

遮罩 Div 或模态弹出窗口

Najmul Hoda
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.71/5 (27投票s)

2008年12月31日

CPOL

4分钟阅读

viewsIcon

183338

downloadIcon

5674

蒙层 div 或模态弹出窗口是一个从父窗口创建的子窗口，它会阻止用户在返回父应用程序之前与之进行交互。模态窗口通常用于应用程序中以控制用户的注意力并显示重要通知。这个蒙层

引言

蒙层 div 或模态弹出窗口是什么意思？    

蒙层 div 或模态弹出窗口是从父窗口创建的子窗口，它  

在用户返回父应用程序之前，阻止用户与父窗口进行交互。模态弹出窗口通常用于应用程序中，以控制用户的注意力并显示重要通知。这个蒙层 div 具有与 Ajax 模态弹出窗口相同的功能，它在 Asp.net 中可以实现相同的功能，而无需复杂的编码。 

使用代码 

为了创建一个蒙层 div 和模态弹出窗口，我创建了两个 div：MaskedDiv 用于在父窗口上创建蒙层，ModalPopupDiv 用于创建模态弹出窗口。CSS 文件 style.css 用于设置这两个 div 的样式，Java Script 文件 maskdiv.js 用于调用函数来显示和隐藏蒙层 div 和弹出窗口。有一个图像 mask.png，用作蒙层 div 的透明背景。  

请看下图，我将一步步解释。 

Masked.PNG 

在上图中，有一个链接“点击此处显示蒙层弹出窗口”。单击该链接将调用一个javascript函数 OpenModelPopup()，该函数将打开蒙层 div 和一个弹出窗口，询问输入姓名。 

请看下图。  

ModalPopup.PNG

从这个窗口，您将无法切换到父窗口，直到您关闭弹出窗口。输入您的姓名并单击提交按钮，将调用一个javascript函数 Submit，该函数将关闭窗口，您的姓名将显示在父窗口上，如下图所示。 

ModalPopup2.PNG 

代码说明 

我使用了一个 .aspx 页面，其中包含两个 div：1) MaskedDiv 和 2) ModalPopupDiv。

MaskedDiv 用于蒙层父窗口。它有一个 CSS 类 MaskedDiv，用于设置其属性。    

<div id="MaskedDiv" class ="MaskedDiv"></div>
      

以下是 MaskedDiv 的 CSS 类。 

div.MaskedDiv 
{
	visibility: hidden;
	position:absolute;
	left:0px;
	top:0px;
	font-family:verdana;
	font-weight:bold;
	padding:40px;
    z-index:100;
	background-image:url(Mask.png);
	/* ieWin only stuff */
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Mask.png');
} 

我将可见性设置为隐藏，因此当页面首次加载时，它不会显示。  

div 的 top 属性设置为 0px，因此 div 将从屏幕左上角打开。 

div 的宽度和高度在 javascript 中动态确定。要在父窗口上创建蒙层，我们需要用任何 div 覆盖父窗口。因此，在 javascript 中，我们获取屏幕宽度和高度，并将其设置为 maskedDiv 的宽度和高度，从而覆盖父窗口。 

z-index 设置为 100，因此它将显示在父页面之上。 

背景图像设置为 mask.png 图像。此图像足够透明，可以透过蒙层 div 查看父级内容。  

ModalPopupDiv 是模态弹出窗口，用于请求输入，提交后会在父窗口上显示姓名。 

<div id="ModalPopupDiv" class="ModalPopup">
        <table width="100%" cellpadding="2" cellspacing="0" border="0">
            <tr>
                <td align="left" style="width: 40%; background-color:#003399; color :White; font-weight:bold";valign="top" >
                    Modal Popup
                </td>
                <td style="width: 60%;background-color:#003399; color :White; font-weight:bold;" align="right" valign="top">
                    <a href="javascript:void(0);" onclick="javascript:CloseModelPopup();" style ="color :White;">Close</a>
                </td>
            </tr>
            <tr>
            <td>
                Enter your name: 
            </td>
            <td>
            <input type ="text" id="txtName" value ="" />
            </td>
            </tr>
            <tr>
            <td colspan ="2" align ="center" >
                  <a href="javascript:void(0);" onclick="javascript:Submit();">Submit</a>
            </td>
            </tr>
        </table>
    </div>

要打开蒙层 div，我使用了一个 javascript 函数 showModalPopup()，该函数是从链接调用的。

 <a href="javascript:void(0);" onclick="javascript:OpenModelPopup();">Click here to show the masked popup.</a>

以下是 Java Script 代码。 

function OpenModelPopup()
    { 
        document.getElementById ('tdDisplayName').innerHTML='';
        document.getElementById ('txtName').value='';
        document.getElementById ('ModalPopupDiv').style.visibility='visible';
        document.getElementById ('ModalPopupDiv').style.display='';
        document.getElementById ('ModalPopupDiv').style.top= Math.round ((document.documentElement.clientHeight/2)+ document.documentElement.scrollTop)-100 + 'px';
        document.getElementById ('ModalPopupDiv').style.left='400px';
        
        document.getElementById ('MaskedDiv').style.display='';
        document.getElementById ('MaskedDiv').style.visibility='visible';
        document.getElementById ('MaskedDiv').style.top='0px';
        document.getElementById ('MaskedDiv').style.left='0px';
        document.getElementById ('MaskedDiv').style.width=  document.documentElement.clientWidth + 'px';
        document.getElementById ('MaskedDiv').style.height= document.documentElement.clientHeight+ 'px';
    }

在 OpenModelPopup() 函数中，您会看到 tdDisplayName。这是父窗口中的一个 td，其 innerHTML 最初设置为空。在弹出窗口中，您将被要求输入您的姓名，并在提交模态弹出窗口中的数据后，tdDisplayName 的 innerHTML 将被设置为您的姓名。 

之后，我设置了模态弹出窗口 div 和蒙层 div 的位置，并使这些 div 可见。 

单击模态弹出窗口中的提交按钮时，将调用一个 javascript 函数 Submit，该函数将 tdDisplayName 的 inner text 设置为您在文本框中输入的文本，然后关闭弹出窗口。 

在模态弹出窗口中，您会看到一个关闭链接。单击该链接将调用一个 javascript 函数 CloseModalPopup，然后模态弹出窗口将关闭。  

值得关注的点  

我使用了 png 图像来创建蒙层。我可以使用颜色作为背景并设置其不透明度，但由于 opera 不支持不透明度，所以我不得不使用其替代品，即透明 png 图像，它提供了相同的效果。  

这里你会发现一些有趣的事情。您会看到模态弹出 div 出现在蒙层 div 之上。   

怎么做???????????????????? 

因为在 .css 中，我设置了这两个 div 的 z-index 属性。蒙层 div 的 z-index 值必须小于模态弹出窗口 div，这样它才能显示在蒙层 div 之上。   

 

© . All rights reserved.