Home > DeveloperSection > Forums > How to use Jquery Ui modal dialog.
Ankit Singh

Total Post:341

Points:2389
Posted on    March-05-2016 4:43 AM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 391  View(s)
Rate this:
we want to use  Jquery Ui modal dialog. How to use This Please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    March-05-2016 4:47 AM

@{

ViewBag.Title = "index";

}

<title>jQuery UI Dialog - Modal form</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

<style>

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;

}

</style>

<script>

$(function () {

var dialog, form,

emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@@[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"),

mobile = $("#mobile"),

PHONE_REGEXP = /^[(]{0,1}[0-9]{3}[)\.\- ]{0,1}[0-9]{3}[\.\- ]{0,1}[0-9]{4}$/,

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(mobile, "mobile", 10, 20);

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. mind@mindstick.com");

valid = valid && checkRegexp(mobile, PHONE_REGEXP, "Enter vailid mobile number");

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>" + mobile.val() + "</td>" +

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

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

"</tr>");

dialog.dialog("close");

}

return valid;

}

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

autoOpen: false,

height: 370,

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>

<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="" 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="email">Mobile</label>

<input type="text" name="Mobile" id="mobile" 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">

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

</fieldset>

</form>

</div>

 

<div id="users-contain" class="ui-widget" style="margin: 0 auto;">

<h1>Users:</h1>

<table id="users" class="ui-widget ui-widget-content">

<thead>

<tr class="ui-widget-header ">

<th>Name</th>

<th>Email</th>

<th>Mobile</th>

<th>Password</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

<button id="create-user">Add</button>

</div>

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick