Jquery UI Dialog Modal Form Example

Jqury UI

Nicesnippets

10846

24-06-2020


Jquery UI Dialog Modal Form Example

Hello Guys,

In this example,I will learn you how to use dialog modal form in jquery ui.you can easy use dialog modal form in jquery ui.

It may be a draggable window which appears on screen when any event is triggered. The jQuery UI dialog method is used to create a basic dialog window which is positioned into the viewport and protected from page content.

Example :


<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>JQuery UI Dialog - Modal Form Example</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>

.container{

margin:40px auto;

text-align:center;

border:1px solid #000;

width:500px;

padding:40px 20px;

}

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: 400px;

margin: 20px auto;

}

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;

}

h2{

text-align: center;

}

</style>

</head>

<body>

<h2>Jquery UI Dialog Modal Form Example - Nicesnippets.com</h2>

<div class="container">

<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>[email protected]</td>

<td>johndoe1</td>

</tr>

</tbody>

</table>

</div>

<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" value="Jane Smith" class="text ui-widget-content ui-corner-all">

<label for="email">Email</label>

<input type="text" name="email" id="email" value="[email protected]" class="text ui-widget-content ui-corner-all">

<label for="password">Password</label>

<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">

<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">

</fieldset>

</form>

</div>

<button id="create-user">Create new user</button>

</div>

<script type="text/javascript">

$( function(){

var dialog, form,

// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29

emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,

name = $( "#name" ),

email = $( "#email" ),

password = $( "#password" ),

allFields = $( [] ).add( name ).add( email ).add( password ),

tips = $( ".validateTips" );

function updateTips( t ) {

tips

.text( t )

.addClass( "ui-state-highlight" );

setTimeout(function() {

tips.removeClass( "ui-state-highlight", 1500 );

}, 500 );

}

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;

}

}

function addUser() {

var valid = true;

allFields.removeClass( "ui-state-error" );

valid = valid && checkLength( name, "username", 3, 16 );

valid = valid && checkLength( email, "email", 6, 80 );

valid = valid && checkLength( password, "password", 5, 16 );

valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );

valid = valid && checkRegexp( email, emailRegex, "eg. [email protected]" );

valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

if(valid){

$( "#users tbody" ).append( "<tr>" +

"<td>" + name.val() + "</td>" +

"<td>" + email.val() + "</td>" +

"<td>" + password.val() + "</td>" +

"</tr>" );

dialog.dialog( "close" );

}

return valid;

}

dialog = $( "#dialog-form" ).dialog({

autoOpen: false,

height: 400,

width: 350,

modal: true,

buttons: {

"Create an account": addUser,

Cancel: function() {

dialog.dialog( "close" );

}

},

close: function() {

form[ 0 ].reset();

allFields.removeClass( "ui-state-error" );

}

});

form = dialog.find( "form" ).on( "submit", function( event ) {

event.preventDefault();

addUser();

});

$( "#create-user" ).button().on( "click", function() {

dialog.dialog( "open" );

});

});

</script>

</body>

</html>

It will help you...