像这里的链接对话框一样使屏幕变暗的 jQuery 对话框答案

【问题标题】：jQuery dialog that darkens the screen like the link dialog does here像这里的链接对话框一样使屏幕变暗的 jQuery 对话框
【发布时间】：2009-02-11 00:38:43
【问题描述】：

我喜欢这里的链接对话框的外观。它使屏幕变暗并且可能是模态的（尽管我没有测试过我只是假设它是）。像这样使用 jQuery UI Dialog 使屏幕变暗的快速简便的方法是什么？

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-1.3

【解决方案1】：

你所说的功能是由WYSIWYM Markdown Editor提供的

要使用 jQuery UI 的对话框来做到这一点，试试这个：

$("#something").dialog({ modal: true; });

<div id="something" title="modal dialog">
<p>Add your stuff here.</p>
</div>

默认情况下并不完全相同，但我认为它更漂亮。 ;)

http://ui.jquery.com/demos/dialog/#modal

【讨论】：

【解决方案2】：

一种方法是在 z-order > 1 处设置一个 div，它以低于 100% 的不透明度覆盖整个屏幕

HTML：

<div id="cover>&nbsp;</div>

CSS：

#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: none;
background-color: #000000;
opacity: .7;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7);

}

然后，您可以在显示对话框时显示封面，该对话框需要在更高的 z-index 上并在您的对话框同时移除封面：

打开：

$("#cover").show();
$("#fileupload").show( "slow" );

关闭：

$("#fileupload").fadeOut( "slow" );
$("#cover").hide();

【讨论】：

有点晚了，但我会将position: absolute; 更改为position: fixed;。当用户滚动时，不透明背景会跟随屏幕，不会留下很大的空隙。
是的，这是一件非常有效的事情，并且在许多（大多数？）情况下都是正确的。