Диалог 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

Один из способов сделать это - получить div в z-порядке> 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-индекс, и снимать обложку одновременно с вашим диалогом:

Открыто:

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

Закрыть:

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