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 30. Modal message
15 30. Open a dialog through a button click event
16 30. Open div tag based dialog
17 30. Set auto open to true
18 30. Set dialog height
19 30. Slide in/out dialog

30. Add ok button to dialog and link with event handler

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Basic Dialog modal

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>

<div class="demo">
<div id="dialog" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
  <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" /><br />
    <input type="checkbox" />checkbox<br />
    <input type="radio" />radio<br />
    <select>
      <option>select</option>
    </select><br /><br />
    <textarea>textarea</textarea><br />
  </form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>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 <code>overlay</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>

30. Close a button after pressing OK button

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Closed action

<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" />    
    <div id="myDialog" title="Lorem Ipsum">
      <p>
        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.
      </p>
    </div>
  </body>
</html>

30. Destroy a dialog

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Dialog animation: close

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Dialog closed event

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Dialog open event

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Fade in/out dialog

<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" />
     <div id="myDialog">
       <p>
         Dialog content
       </p>
       <div id="tmpButtons">
         <input type="submit" id="tmpClose" value="Close" />
       </div>
     </div>
  </body>
</html>

30. Get the input value from a dialog

<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;
          });
          $("<p>").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>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
    </div>
</body>
</html>

30. jQuery UI Dialog

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
<div id="dialog" title="Basic dialog">
  <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>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<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" /><br />
  <input type="checkbox" />checkbox<br />
  <input type="radio" />radio<br />
  <select>
    <option>select</option>
  </select><br /><br />
  <textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<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>
</div><!-- End demo-description -->
</body>
</html>

30. Modal confirmation

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
<div id="dialog" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
  <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" /><br />
    <input type="checkbox" />checkbox<br />
    <input type="radio" />radio<br />
    <select>
      <option>select</option>
    </select><br /><br />
    <textarea>textarea</textarea><br />
  </form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>Confirm an action that may be destructive or important.  Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>

30. Modal form

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
<div id="dialog" title="Create new user">
  <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>
</div>

<div id="users-contain" class="ui-widget">
    <h1>Existing Users:</h1>

  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@example.ru</td>
        <td>johndoe1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button>
</div><!-- End demo -->
<div class="demo-description">
<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 <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>

30. Modal message

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!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>
<div class="demo">
<div id="dialog" title="Download complete">
  <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    Your files have downloaded successfully into the My Downloads folder.
  </p>
  <p>
    Currently using <b>36% of your storage space</b>.
  </p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
  <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" /><br />
    <input type="checkbox" />checkbox<br />
    <input type="radio" />radio<br />
    <select>
      <option>select</option>
    </select><br /><br />
    <textarea>textarea</textarea><br />
  </form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work.  Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>

30. Open a dialog through a button click event

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Open div tag based dialog

<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" />
     <div id="myDialog">
       <p>
         Dialog content
       </p>
       <div id="tmpButtons">
         <input type="submit" id="tmpClose" value="Close" />
       </div>
     </div>
  </body>
</html>

30. Set auto open to true

<!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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Set dialog height

<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>
    <div id="myDialog" class="flora" >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.</div>
</body>
</html>

30. Slide in/out dialog

<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" />
     <div id="tmpDialogue">
       <p>
         Dialog content
       </p>
       <div id="tmpButtons">
         <input type="submit" id="tmpClose" value="Close" />
       </div>
     </div>
  </body>
</html>

JavaScript Tutorial/jQuery/UI Dialog

Содержание

30. Add ok button to dialog and link with event handler

30. Basic Dialog modal

30. Close a button after pressing OK button

30. Closed action

30. Destroy a dialog

30. Dialog animation: close

30. Dialog closed event

30. Dialog open event

30. Fade in/out dialog

30. Get the input value from a dialog

30. jQuery UI Dialog

30. Modal confirmation

30. Modal form

30. Modal message

30. Open a dialog through a button click event

30. Open div tag based dialog

30. Set auto open to true

30. Set dialog height

30. Slide in/out dialog

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты