jQuery 对话框使屏幕变暗，就像链接对话框在此处所做的那样

Question

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

Answer 1

您正在谈论的功能是由 WYSIWYM Markdown 编辑器 提供的

要使用 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

Answer 2

一种方法是让 div 的 z 顺序 > > 1 以低于 100% 的不透明度覆盖整个屏幕

HTML:

<div id="cover> </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();