CODEWITHSUNDEEP
jquery
Tom
Tom

Reputation: 2634

jquery modal dialog doesn't work with modal:true

Not sure what I'm doing wrong here. Just trying to make it a modal dialog (dim out the page content). I thought it is as simple as modal:true. A dialog comes up when I click the image but it doesn't dim out the page content. 

<img src="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>

Upvotes: 1

Views: 3126

Answers (1)

Kevin B
Kevin B

Reputation: 95064

The syntax is wrong.

You should set this initially:

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

Upvotes: 6

Related Questions