Set auto open to true : UI Dialog « jQuery « JavaScript DHTML






Set auto open to true

 

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.dialog.js"></script>
  <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        var doOk = function() {
          $("#myDialog").dialog("close");
        
        }
        var dialogOpts = {
          modal: true,
          buttons: {
            "Ok!": doOk
          },
          height: "400px",
          autoOpen: false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#openDialog").click(function() {
          $("#myDialog").dialog("open");
        });  
    });
  </script>
</head>
<body>
<button id="openDialog">Open the Dialog!</button>
    <div id="myDialog" class="flora" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.</div>

</body>
</html>

   
  








Related examples in the same category

1.jQuery UI Dialog
2.Basic Dialog modal
3.Modal confirmation
4.Modal form
5.Modal message
6.Set dialog height
7.Add ok button to dialog and link with event handler
8.Dialog open event
9.Dialog closed event
10.Dialog animation: close
11.Open a dialog through a button click event
12.Close a button after pressing OK button
13.Destroy a dialog
14.Get the input value from a dialog
15.Slide in/out dialog
16.background: '#fff', opacity: '0.7'
17.resizable: false, draggable: false
18.show: 'explode'
19.Closed action