Open Jquery Modal Dialog On Page Load
I have a page, i want it to display some content in a modal dialog (jquery UI dialog) as soon as the page is loaded. $(document).ready(function(){ $('#example').dialog(); }
Solution 1:
Your div tag isn't properly formatted and it needs to be closed. The following worked for me, but it needs proper CSS files.
<html><head><scripttype="text/javascript"language="javascript"src="jquery/jquery.js"></script><scripttype="text/javascript"language="javascript"src="jquery/jquery.ui.js"></script><scripttype="text/javascript"language="javascript">
$(document).ready(function(){
$("#example").dialog({modal: true});
});
</script></head><body><divid="example"class="flora"title="This is my title">
I'm in a dialog!
</div></body></html>Solution 2:
Wayne Khan is right in that
the default behavior is to open when you call dialog(), unless you set autoOpen to false.
and tvanfosson has it nearly correct, though the default dialog is not Modal. To display a modal window, you must set the modal option to true
To illustrate, here's a trimmed-down excerpt from a small project I was working on tonight:
...
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><scripttype="text/javascript"src="./jquery-ui-personalized-1.6rc6.min.js"></script><scripttype="text/javascript"src="./init.js"></script><linkhref="./css.css"type="text/css" /><scripttype="text/javascript">
$(function() {
$('#exampleNode').dialog({
modal: 'true'
});
});
</script>
...
For your reference:
- The jQuery Dialog Documentation (see the bottom for a styling reference)
- A Modal Dialog example
- My small MIT licensed project, which has a modal dialog: inComeAgain?
Post a Comment for "Open Jquery Modal Dialog On Page Load"