jQuery-Dialog, der den Bildschirm verdunkelt, so wie es der Link-Dialog hier tut

Question

Ich mag das Aussehen des Link-Dialogs hier. Er verdunkelt den Bildschirm und ist wahrscheinlich modal (obwohl ich das nicht getestet habe, ich nehme es einfach an). Was ist eine schnelle und einfache Möglichkeit, den Bildschirm zu verdunkeln, wie das mit einem jQuery UI Dialog?

Answer 1

Die Funktionalität, die Sie meinen, wird von der WYSIWYM Markdown-Editor

Um dies mit dem Dialog von jQuery UI zu tun, versuchen Sie Folgendes:

$("#something").dialog({ modal: true; });

<div id="something" title="modal dialog">
<p>Add your stuff here.</p>
</div>

Es ist standardmäßig nicht genau dasselbe, aber ich denke, es ist noch schöner ;)

http://ui.jquery.com/demos/dialog/#modal

Answer 2

Eine Möglichkeit besteht darin, ein div mit z-order > 1 zu haben, das den gesamten Bildschirm mit weniger als 100 % Deckkraft abdeckt

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

}

Dann können Sie die Abdeckung einblenden, wenn Sie Ihr Dialogfeld anzeigen, das einen noch höheren z-Index haben muss, und die Abdeckung gleichzeitig mit Ihrem Dialogfeld entfernen:

Offen:

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

Schließen:

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