How to make a modal pop-up
- Drag an HTML widget onto your page
- 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