|
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!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: { Cancel: function() { $(this).dialog('close'); }, 'Confirm': function() { $(this).dialog('close'); } }, dialogClass: "no-title", hide: { effect: "scale", easing: "easeInBack" }, show: { effect: "scale", easing: "easeOutBack" } }); $(".showDialog").click(function() { var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first'); dlgFirstButton.addClass('button'); $(".loginDialog").dialog("open"); }); }); $("#dialog-confirm :checkbox").change(function() { $(".ui-dialog-buttonpane button:contains('Confirm')") .button(this.checked ? "enable" : "disable"); }); }//]]> </script> <button class="showDialog">Show</button> <div class="loginDialog" title="Login"> My note<div id="dialog-confirm" title="test"> <label>Enable Confirm?<input type="checkbox" checked /></label> </div> </div> <style type='text/css'> input.text { margin-bottom: 12px; padding: 0.4em; width: 95%; } .no-title .ui-dialog-titlebar { display: none; } .button { color: red; background-image: none; background-color: green; } </style> |
