像链接对话框那样使屏幕变暗的jQuery对话框

Question

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

Answer 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

Answer 2

一种方法是在z-order＆gt;处设置div。 1覆盖整个屏幕的不透明度低于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();