How to create a JavaScript Modal dialog (like the one that just popped up) using JQuery 

Simply drag a html widget onto your page and paste the following code into it:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://ui.jquery.com/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/ui.dialog.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/latest/ui/ui.draggable.js"></script>


<div id="example" class="flora" title="This is my title">I'm in a dialog!</div>

  <script>

 jQuery.noConflict();

jQuery(document).ready(function(){
      jQuery("#example").dialog();   
  });
  </script>

The text inside the div with the id of example above is what you will see inside your dialog box. The title attribute of the dialog box is what will appear in the title bar of your dialog.

I'm in a dialog!
 
Make a Free Website with Yola.