How to make a modal pop-up

  1. Drag an HTML widget onto your page
  2. Paste this code into it
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
    $(document).ready(function(){
      $("#example").dialog();
    });
  </script>
  
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
  <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.base.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.dialog.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.resizable.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/1.5b2/ui.draggable.js"></script>


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

Done!

- This tutorial is adapted from: http://docs.jquery.com/UI/Dialog
- You can do a whole lot of other things with jquery. Check out: the documentation
- You can also try making a dialog with the Yahoo User Interface (YUI). See: http://developer.yahoo.com/yui/container/dialog/ (it's a litte more tricky)

This is a quick tutorial on how to make a dialog box just like this one
 
Make a Free Website with Yola.