Le dialogue modal de jquery ne fonctionne pas avec modal: true - jquery

Je ne suis pas sûr de ce que je fais mal ici. J'essaie simplement d’en faire un dialogue modal (atténuez le contenu de la page). Je pensais que c’était aussi simple que cela. modal:true. Un dialogue s’affiche lorsque je clique sur l’image, mais le contenu de la page n’est pas masqué.

<img src="/images/images/help-35-30.png" alt="Help" class="helpdetails" style="padding-left:30px;"/>
<div class="dialogplease"><p>A comment</p></div>

<link rel="stylesheet" type="text/css" href="mycss/css/jquery-ui-1.8.20.custom.css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.js"></script>
<script>
$(function() {

$(".dialogplease").dialog(); //init dialog
$(".dialogplease").dialog("close"); //don"t show dialog yet
$(".helpdetails").click(function(e) {
$(".dialogplease").dialog("open")({
modal: true
});
});
});
</script>

Réponses:

La syntaxe est fausse.

Vous devriez définir ceci initialement:

$(function() {
$(".dialogplease").dialog({modal:true,autoOpen:false}); //init dialog
$(".helpdetails").click(function(e) {
$(".dialogplease").dialog("open");
});
});