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
  • …
 
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<title>jQuery UI Dialog - Modal form</title>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="stylesheet" />
​
<script type="text/javascript" src="http://code.jquery.com/nightlies/jquery-2009-02-17.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/testing/ui/jquery.ui.all.js"></script> 
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" />
​
​
    <script type="text/javascript">
​
    </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.com</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>
​
 
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;  }
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers