Boîte de dialogue jQuery qui assombrit l'écran comme le dialogue de lien ici

Question

J'aime l'apparence de la boîte de dialogue de lien ici. Il assombrit l'écran et est probablement modal (même si je n'ai pas testé ce que je suppose que c'est). Qu'est-ce qu'un moyen rapide et facile d'assombrir l'écran comme ça avec une boîte de dialogue jQuery UI?

Answer 1

La fonctionnalité dont vous parlez est fourni par le WYSIWYM Markdown Editor

Pour le faire avec la boîte de dialogue de jQuery UI, essayez ceci:

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

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

Ce n'est pas exactement la même chose par défaut, mais je pense qu'il est encore plus joli. ;)

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

Answer 2

Une façon de le faire est d'avoir un div à ordre z> 1 qui couvre tout l'écran à moins de 100% d'opacité

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

}

Ensuite, vous pouvez montrer la couverture lorsque vous affichez votre boîte de dialogue, qui doit être à z-index encore plus élevé et retirez le couvercle en même temps que votre boîte de dialogue:

Ouvert:

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

Fermer:

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