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

Question

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

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

一种方法是使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();