How to use Jquery Ui modal dialog.

Anonymous User · 2016-03-05T04:43:18.960Z
we want to use Jquery Ui modal dialog . How to use This Please help me.
@{
    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>
forum

How to use Jquery Ui modal dialog.

Can you answer this question?

1 Answers
