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

Question

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

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 > 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();