---
title: "How to use Jquery Ui modal dialog."  
description: "How to use Jquery Ui modal dialog."  
author: "Anonymous User"  
published: 2016-03-05  
updated: 2016-03-05  
canonical: https://www.mindstick.com/forum/34034/how-to-use-jquery-ui-modal-dialog  
category: "jquery"  
tags: ["jquery"]  
reading_time: 3 minutes  

---

# How to use Jquery Ui modal dialog.

we want to use [Jquery Ui](https://www.mindstick.com/forum/23071/how-to-remove-close-button-on-the-jquery-ui-dialog) [modal dialog](https://www.mindstick.com/forum/34432/how-to-apply-animation-on-bootstrap-modal-dialog). How to use This Please help me.

## Replies

### Reply by Anonymous User

```
@{
    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>

　
```

```

```

```

```


---

Original Source: https://www.mindstick.com/forum/34034/how-to-use-jquery-ui-modal-dialog

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.