forum

home / developersection / forums / how to use jquery ui modal dialog.

Ask Question

How to use Jquery Ui modal dialog.

Anonymous User 1845 05-Mar-2016
we want to use  Jquery Ui modal dialog. How to use This Please help me.
jquery jquery 
Updated on 05-Mar-2016
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

05-Mar-2016 
@{


    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>



　
How to use Jquery Ui modal dialog.
How to use Jquery Ui modal dialog.

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy