JavaScript Tutorial/jQuery/UI Dialog
Содержание
- 1 30. Add ok button to dialog and link with event handler
- 2 30. Basic Dialog modal
- 3 30. Close a button after pressing OK button
- 4 30. Closed action
- 5 30. Destroy a dialog
- 6 30. Dialog animation: close
- 7 30. Dialog closed event
- 8 30. Dialog open event
- 9 30. Fade in/out dialog
- 10 30. Get the input value from a dialog
- 11 30. jQuery UI Dialog
- 12 30. Modal confirmation
- 13 30. Modal form
- 14 Existing Users:
30. Add ok button to dialog and link with event handler
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var doOk = function() { alert("alert"); } var dialogOpts = { modal: true, buttons: { "Ok!": doOk }, height: "250px" }; $("#myDialog").dialog(dialogOpts); }); </script>
</head> <body>
</body> </html></source>
30. Basic Dialog modal
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Dialog - Basic modal</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/external/bgiframe/jquery.bgiframe.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#dialog").dialog({ bgiframe: true, height: 140, modal: true }); }); </script>
</head> <body>
Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.
Sed vel diam id libero <a href="http://example.ru">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.
<form> <input value="text input" />
<input type="checkbox" />checkbox
<input type="radio" />radio
<select> <option>select</option> </select>
<textarea>textarea</textarea>
</form>
A modal dialog prevents the user from interacting with the rest of the page until it is closed. To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the overlay
option.
</body> </html></source>
30. Close a button after pressing OK button
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var doOk = function() { $("#myDialog").dialog("close"); } var dialogOpts = { modal: true, buttons: { "Ok!": doOk }, height: "400px", autoOpen: false }; $("#myDialog").dialog(dialogOpts); $("#openDialog").click(function() { $("#myDialog").dialog("open"); }); }); </script>
</head> <body> <button id="openDialog">Open the Dialog!</button>
</body> </html></source>
30. Closed action
<source lang="javascript">
<html>
<head> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript">
$(document).ready(
function() { $("div#myDialog").dialog({ autoOpen: false, show: "explode", close: function(e, ui) { alert(this.id); } }); $("input#tmpOpen").click( function($e) { $("div#myDialog").dialog("open"); } ); }
);
</script> </head> <body> <input type="submit" id="tmpOpen" value="Open Dialog" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse tincidunt aliquam velit. Maecenas libero. Aliquam dapibus tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</body>
</html></source>
30. Destroy a dialog
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var doOk = function() { $("#myDialog").dialog("close"); } var dialogOpts = { modal: true, buttons: { "Ok!": doOk }, height: "400px", autoOpen: false }; $("#myDialog").dialog(dialogOpts); $("#openDialog").click(function() { $("#myDialog").dialog("open"); }); $("#destroy").click(function() { $("#myDialog").dialog("destroy"); }); }); </script>
</head> <body> <button id="openDialog">Open the Dialog!</button>
<button id="destroy">Destroy the dialog!</button>
</body> </html></source>
30. Dialog animation: close
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var dialogOpts = { hide: true }; $("#myDialog").dialog(dialogOpts); }); </script>
</head> <body>
</body> </html></source>
30. Dialog closed event
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { //define config object var dialogOpts = { open: function() { alert("The dialog is open"); }, close: function() { alert("The dialog is closed"); } }; $("#myDialog").dialog(dialogOpts); }); </script>
</head> <body>
</body> </html></source>
30. Dialog open event
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { //define config object var dialogOpts = { open: function() { alert("The dialog is open"); }, close: function() { alert("The dialog is closed"); } }; $("#myDialog").dialog(dialogOpts); }); </script>
</head> <body>
</body> </html></source>
30. Fade in/out dialog
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $("input#tmpOpen").click( function($e) { $("div#myDialog").fadeIn(5000); } ); $("input#tmpClose").click( function($e) { $("div#myDialog").fadeOut(5000); } ); }
);
</script> <style type="text/css">
div#myDialog {
display: none; position: absolute; top: 50%; left: 50%; width: 500px; height: 200px; margin: -100px 0 0 -250px; background: rgb(233, 233, 233); border: 1px solid rgb(128, 128, 128);
} div#tmpButtons {
position: absolute; bottom: 5px; right: 5px;
}
</style> </head> <body> <input type="submit" id="tmpOpen" value="Open" />
Dialog content
<input type="submit" id="tmpClose" value="Close" />
</body>
</html></source>
30. Get the input value from a dialog
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var cancel = function() { $("#myDialog").dialog("close"); } var getResponse = function(){ var answer; $("input").each(function(){ (this.checked == true) ? answer = $(this).val() : null; });$("
").text(answer).insertAfter($("#poll")); $("#myDialog").dialog("close"); } var dialogOpts = { modal: true, buttons: { "Done": getResponse, "Cancel": cancel }, autoOpen: false }; $("#myDialog").dialog(dialogOpts); $("#poll").click(function() { $("#myDialog").dialog("open"); }); }); </script> </head> <body> <button id="poll">Poll</button>
<p>Question?</p> <label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question">
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
</body> </html></source>
30. jQuery UI Dialog
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Dialog - Default functionality</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/external/bgiframe/jquery.bgiframe.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $.ui.dialog.defaults.bgiframe = true; $(function() { $("#dialog").dialog(); }); </script>
</head> <body>
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon.</p>
<p>Sed vel diam id libero <a href="http://example.ru">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" />
<input type="checkbox" />checkbox
<input type="radio" />radio
<select> <option>select</option> </select>
<textarea>textarea</textarea>
</form>
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the "x" icon by default.</p>
</body> </html></source>
30. Modal confirmation
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Dialog - Modal confirmation</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/external/bgiframe/jquery.bgiframe.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#dialog").dialog({ bgiframe: true, resizable: false, height:140, modal: true, overlay: { backgroundColor: "#000", opacity: 0.5 }, buttons: { "Delete all items in recycle bin": function() { $(this).dialog("close"); }, Cancel: function() { $(this).dialog("close"); } } }); }); </script>
</head> <body>
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
<p>Sed vel diam id libero <a href="http://example.ru">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" />
<input type="checkbox" />checkbox
<input type="radio" />radio
<select> <option>select</option> </select>
<textarea>textarea</textarea>
</form>
<p>Confirm an action that may be destructive or important. Set the modal
option to true, and specify primary and secondary user actions with the buttons
option.</p>
</body> </html></source>
30. Modal form
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Dialog - Modal form</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/effects.core.js"></script> <script type="text/javascript" src="js/ui/effects.highlight.js"></script> <script type="text/javascript" src="js/external/bgiframe/jquery.bgiframe.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; !important; cursor:pointer; position: relative; text-align: center; } .ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; } </style> <script type="text/javascript"> $(function() { var name = $("#name"), email = $("#email"), password = $("#password"), allFields = $([]).add(name).add(email).add(password), tips = $("#validateTips"); function updateTips(t) { tips.text(t).effect("highlight",{},1500); } function checkLength(o,n,min,max) { if ( o.val().length > max || o.val().length < min ) { o.addClass("ui-state-error"); updateTips("Length of " + n + " must be between "+min+" and "+max+"."); return false; } else { return true; } } function checkRegexp(o,regexp,n) { if ( !( regexp.test( o.val() ) ) ) { o.addClass("ui-state-error"); updateTips(n); return false; } else { return true; } } $("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 300, modal: true, buttons: { "Create an account": function() { var bValid = true; allFields.removeClass("ui-state-error"); bValid = bValid && checkLength(name,"username",3,16); bValid = bValid && checkLength(email,"email",6,80); bValid = bValid && checkLength(password,"password",5,16); bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.ru/email_address_validation/ bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&"\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&"\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.ru"); bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); if (bValid) { $("#users tbody").append("<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>"); $(this).dialog("close"); } }, Cancel: function() { $(this).dialog("close"); } }, close: function() { allFields.val("").removeClass("ui-state-error"); } }); $("#create-user").click(function() { $("#dialog").dialog("open"); }) .hover( function(){ $(this).addClass("ui-state-hover"); }, function(){ $(this).removeClass("ui-state-hover"); } ).mousedown(function(){ $(this).addClass("ui-state-active"); }) .mouseup(function(){ $(this).removeClass("ui-state-active"); }); }); </script>
</head> <body>
<p id="validateTips">All form fields are required.</p> <form> <fieldset> <label for="name">Name</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> <label for="email">Email</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> <label for="password">Password</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> </fieldset> </form>
<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal
option to true, and specify primary and secondary user actions with the buttons
option.</p>
</body> </html></source>
30. Modal message
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Dialog - Modal message</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/external/bgiframe/jquery.bgiframe.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#dialog").dialog({ bgiframe: true, modal: true, buttons: { Ok: function() { $(this).dialog("close"); } } }); }); </script>
</head> <body>
<p> Your files have downloaded successfully into the My Downloads folder. </p> <p> Currently using 36% of your storage space. </p>
<p>Sed vel diam id libero <a href="http://example.ru">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" />
<input type="checkbox" />checkbox
<input type="radio" />radio
<select> <option>select</option> </select>
<textarea>textarea</textarea>
</form>
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal
option to true, and specify a primary action (Ok) with the buttons
option.</p>
</body> </html></source>
30. Open a dialog through a button click event
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var doOk = function() { $("#myDialog").dialog("close"); } var dialogOpts = { modal: true, buttons: { "Ok!": doOk }, height: "400px", autoOpen: false }; $("#myDialog").dialog(dialogOpts); $("#openDialog").click(function() { $("#myDialog").dialog("open"); }); }); </script>
</head> <body> <button id="openDialog">Open the Dialog!</button>
</body> </html></source>
30. Open div tag based dialog
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $("input#tmpOpen").click( function($e) { $("div#myDialog").show(5000); } ); $("input#tmpClose").click( function($e) { $("div#myDialog").hide(5000); } ); }
);
</script> <style type="text/css">
div#myDialog {
display: none; position: absolute; top: 50%; left: 50%; width: 500px; height: 200px; margin: -101px 0 0 -251px; border: 1px solid rgb(128, 128, 128);
} div#tmpButtons {
position: absolute; bottom: 5px; right: 5px;
}
</style> </head> <body> <input type="submit" id="tmpOpen" value="Open" />
<p> Dialog content </p>
<input type="submit" id="tmpClose" value="Close" />
</body>
</html></source>
30. Set auto open to true
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var doOk = function() { $("#myDialog").dialog("close"); } var dialogOpts = { modal: true, buttons: { "Ok!": doOk }, height: "400px", autoOpen: false }; $("#myDialog").dialog(dialogOpts); $("#openDialog").click(function() { $("#myDialog").dialog("open"); }); }); </script>
</head> <body> <button id="openDialog">Open the Dialog!</button>
</body> </html></source>
30. Set dialog height
<source lang="javascript">
<html lang="en"> <head>
<title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.dialog.js"></script> <script type="text/javascript" src="js/ui/ui.resizable.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { var doOk = function() { alert("alert"); } var dialogOpts = { modal: true, buttons: { "Ok!": doOk }, height: "250px" }; $("#myDialog").dialog(dialogOpts); }); </script>
</head> <body>
</body> </html></source>
30. Slide in/out dialog
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $("input#tmpOpen").click( function($e) { $("div#tmpDialogue").slideDown(5000); } ); $("input#tmpClose").click( function($e) { $("div#tmpDialogue").slideUp(5000); } ); }
);
</script> <style type="text/css">
div#tmpDialogue {
display: none; position: absolute; top: 50%; left: 50%; width: 500px; height: 200px; margin: -100px 0 0 -250px; background: rgb(233, 233, 233); border: 1px solid rgb(128, 128, 128);
} div#tmpButtons {
position: absolute; bottom: 5px; right: 5px;
}
</style> </head> <body> <input type="submit" id="tmpOpen" value="Open" />
<p> Dialog content </p>
<input type="submit" id="tmpClose" value="Close" />
</body></html></source>