禁用父窗口

azamqadri

3.00/5 (1投票)

2009年4月24日

CPOL

42713

368

为父窗口提供禁用效果。

下载源代码 - 604 B

引言

本文讨论了如何在打开警报或确认对话框时，为父窗口提供禁用效果。

Using the Code

为了简单起见，在 DisabledEffect 项目中，我使用了简单的 HTML 和 JavaScript 来更改 div 的样式。这个演示 HTML 清晰地展示了 div 样式的更改如何为您的用户带来更好的体验。

下面的截图显示了禁用模式下的父窗口。

完整的源代码如下所示。相同的代码也包含在 *.zip 文件中。

<html>
<head>
<title>Disabled Effect</title>
<script language="javascript">

function DisabledEffect()
{
    document.getElementById ('MainDiv').style.display='';
    document.getElementById ('MainDiv').style.visibility='visible';
    document.getElementById ('MainDiv').style.position='absolute';

    document.getElementById ('MainDiv').style.top='0px';
    document.getElementById ('MainDiv').style.left='0px';
    document.getElementById ('MainDiv').style.width= '100%';
    document.getElementById ('MainDiv').style.height= '100%';

    document.getElementById('MainDiv').style.backgroundColor = "Gray";
    document.getElementById('MainDiv').style.filter = "alpha(opacity=60)";
    document.getElementById('MainDiv').style.opacity = "0.6";

    alert("Parent window in disabled effect!!!");

    document.getElementById ('MainDiv').style.display='none';
    document.getElementById ('MainDiv').style.visibility='hidden';

    document.getElementById ('MainDiv').style.top='0px';
    document.getElementById ('MainDiv').style.left='0px';
    document.getElementById ('MainDiv').style.width= '0px';
    document.getElementById ('MainDiv').style.height= '0px';
}

</script>
</head>
<body>
<form id="frmMain" runat="server">
<div id="MainDiv"></div>

This is just some text <br /><br />

Test Textbox : <input type=text /> <br /><br /><br />

<input type=button value="Click Me" onclick="DisabledEffect()" />
</form>
</body>
</html>

历史

2009 年 4 月 24 日：初始发布