JavaScript Tutorial/jQuery/UI Dialog

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Existing Users:

<thead> </thead> <tbody> </tbody>
Name Email Password
John Doe john.doe@example.ru johndoe1

<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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti. Donec at dolor ac metus pharetra aliquam. Suspendisse purus. Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt viverra felis. Integer elit mauris, egestas ultricies, gravida vitae, feugiat a, tellus.

</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>