Диалоговое окно 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

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

Open:

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

Закрыть:

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