CODEWITHSUNDEEP
jquerymodal-dialog
Analog
Analog

Reputation: 261

jQuery modal dialog on page load

I'm just trying to do a simple modal message on page load. There are tons of posts on doing this but I still can't seem to make it work.

I have this in the head

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">                                         
$(document).ready(function() {                         
 $("#ModalMessage").dialog({modal: true});  
});
</script>

and in the body

<div id="ModalMessage" title="Test" style="display:none;">
yadda yadda yadda
</div>

I thought that was all that was needed, but all I get is a blank page, any idea?

TIA

Upvotes: 2

Views: 7127

Answers (2)

natedavisolds
natedavisolds

Reputation: 4295

Your script tags in the head are out of order. JQuery should be first, then jquery-ui. This would prevent jquery-ui (and hence the dialog plugin) from running.

Upvotes: 1

Niels
Niels

Reputation: 49919

The dialog is default hidden. Try to put the autoOpen = true.

$("#ModalMessage").dialog({modal: true, autoOpen : true});

Otherwise you need to trigger the open event:

$("#ModalMessage").dialog("open")

Upvotes: 0

Related Questions