-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery UI Tutorial jQuery UI Tutorial jQuery UI Introduction jQuery UI Download jQuery UI Usage jQuery UI Customization jQuery UI How It Works jQuery UI Themes jQuery UI Themes jQuery UI ThemeRoller jQuery UI CSS Framework API jQuery UI Design Themes jQuery UI Widget Factory jQuery UI Widget Factory jQuery UI Extended Widgets jQuery UI Widget Method Invocation jQuery UI Why Use the Widget Factory jQuery UI How to Use the Widget Factory jQuery UI Reference jQuery UI API Documentation API Category - Effects API Category - Effects Core API Category - Interactions API Category - Method Overload API Category - Methods API Category - Selectors API Category - Theme API Category - UI Core API Category - Utilities API Category - Widgets jQuery UI Examples jQuery UI Examples Draggable Droppable Resizable Selectable Sortable Accordion Autocomplete Button Datepicker Dialog Menu Progressbar Slider Spinner Tabs Tooltip Effect Show Hide Toggle .addClass() .removeClass() .toggleClass() .switchClass() Color Animation Position Widget Factory jQuery UI Example – Datepicker jQuery UI Example – Menu Deep Dive Computer Science Web Services Web Service Software Scripts Programming Languages Programming Development Tools Web Design & Development Scripting Languages jQuery UI Example - Dialog Opens content in an interactive overlay. For more details about the dialog widget, please see the API documentation: Dialog Widget. Default Functionality A basic dialog window is an overlay positioned within the viewport and is separated from the page content (like a select element) by an iframe. It consists of a title bar and a content area, and can be moved, resized, and closed by default via the 'x' icon. $(function() { $( "#dialog" ).dialog(); }); View Demo Animation The dialog can be animated by specifying an effect for the show/hide properties. You must reference the separate effect file for the effect you wish to use. $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); Open Dialog View Demo Basic Modal A modal dialog prevents the user from interacting with the rest of the page until the dialog is closed. $(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); });

Sed vel diam id libero rutrum convallis. 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.

View Demo Modal Confirmation Confirming an action may be destructive or meaningful. Set the modal option to true and specify primary and secondary user actions with the buttons option. $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); });

Sed vel diam id libero rutrum convallis. 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.

View Demo Modal Form Use a modal dialog to request user data in 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. 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-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } $(function() { var name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), allFields = $( [] ).add( name ).add( email ).add( password ), tips = $( ".validateTips" ); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "" + n + " length must be between " + min + " and " + max + " between." ); 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-form" ).dialog({ autoOpen: false, height: 300, width: 350, 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, /^()+$/i, "Username must be composed of a-z、0-9、underscores, and must start with a letter." ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid = bValid && checkRegexp( email, /^(((|d|[!#$%&'*+-/=?^_`{|}~]|)+(.(|d|[!#$%&'*+-/=?^_`{|}~]|)+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?((|x21|||)|((|))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@(((|d|)|((|d|)(|d|-|.|_|~|)*(|d|))).)+((|)|((|)(|d|-|.|_|~|)*(|))).?$/i, "eg. ui@jquery.com" ); bValid = bValid && checkRegexp( password, /^()+$/, "Password field only allows： a-z 0-9" ); if ( bValid ) { $( "#users tbody" ).append( "" + "" + name.val() + "" + "" + email.val() + "" + "" + password.val() + "" + "" ); $( this ).dialog( "close" ); } }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); }); }); Create new user View Demo Modal Message Use a modal dialog to confirm information and actions before the next step is executed. Set the modal option to true and specify the primary action (Ok) with the buttons option. $(function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); });

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu fe