HOW TO USE JQUERY UI MODAL DIALOG.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
JQuery 
 711  View(s)
Ratings:
Rate this:
we want to use  Jquery Ui modal dialog. How to use This Please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use Jquery Ui modal dialog.

    @{

    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>

     

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!