Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Modal form</title>
      <!-- base cdn: http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css-->
        <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css"
        />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    </head>
    
    <body>
        <div id="dialog-form" title="Create new user">
            <p class="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.com</td>
                        <td>johndoe1</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button id="create-user">Create new user</button>
    </body>
​
</html>
 
    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");
    
      $("#dialog-form").dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
              "Create an account": function () {                  
                  allFields.removeClass("ui-state-error");            
                  $(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");
      });
  });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers