lib-jquery-style-custom-development-bundle-demos-dialog-modal-message.htm / htm
<!doctype html> <html lang="en"> <head> <title>jQuery UI Dialog - Modal message</title> <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui/ui.core.js"></script> <script type="text/javascript" src="ui/ui.draggable.js"></script> <script type="text/javascript" src="ui/ui.resizable.js"></script> <script type="text/javascript" src="ui/ui.dialog.js"></script> <script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script> <link type="text/css" href="lib-jquery-style-custom-development-bundle-demos-demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#dialog").dialog({ bgiframe: true, modal: true, buttons: { Ok: function() { this.dialog('close'); } } }); }); </script> </head> <body> <div class="demo"> <div id="dialog" title="Download complete"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> Your files have downloaded successfully into the My Downloads folder. </p> <p> Currently using <b>36% of your storage space</b>. </p> </div> <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> <form> <input value="text input" /><br /> <input type="checkbox" />checkbox<br /> <input type="radio" />radio<br /> <select> <option>select</option> </select><br /><br /> <textarea>textarea</textarea><br /> </form> </div><!-- End sample page content --> </div><!-- End demo --> <div class="demo-description"> <p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p> </div><!-- End demo-description --> </body> </html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.