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

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

Dismiss x
public
Bin info
anonymouspro
0viewers