A simple modal using dialogue box
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type='text/javascript'>//<![CDATA[ window.onload=function(){ $(function () { $(".loginDialog").dialog({ autoOpen: false, buttons: { "Login": function () { $(this).dialog("close"); } }, dialogClass: "no-title", hide: { effect: "scale", easing: "easeInBack" }, show: { effect: "scale", easing: "easeOutBack" } }); $(".showDialog").click(function() { $(".loginDialog").dialog("open"); }); }); }//]]> </script> <button class="showDialog">Show</button> <div class="loginDialog" title="Login"> My note </div> <style type='text/css'> input.text { margin-bottom: 12px; padding: 0.4em; width: 95%; } .no-title .ui-dialog-titlebar { display: none; } </style> |