forum

Home / DeveloperSection / Forums / How to use Jquery Ui modal dialog.

Ask Question

How to use Jquery Ui modal dialog.

Anonymous User 1631 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

Anonymous User

Follow
I am a content writter !

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>
<linkrel="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: .6em0;
 }
div#users-contain {
width: 350px;
margin: 20px0;
 }
div#users-containtable {
margin: 1em0;
border-collapse: collapse;
width: 100%;
 }
div#users-containtabletd, div#users-containtableth {
border: 1pxsolid#eee;
padding: .6em10px;
text-align: left;
 }
.ui-dialog.ui-state-error {
padding: .3em;
 }
.validateTips {
border: 1pxsolidtransparent;
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 + ".");
returnfalse;
 } else {
returntrue;
 }
 }
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
 o.addClass("ui-state-error");
 updateTips(n);
returnfalse;
 } else {
returntrue;
 }
 }
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>
<divid="dialog-form"title="Create new user">
<pclass="validateTips">All form fields are required.</p>
<form>
<fieldset>
<labelfor="name">Name</label>
<inputtype="text"name="name"id="name"value=""class="text ui-widget-content ui-corner-all">
<labelfor="email">Email</label>
<inputtype="text"name="email"id="email"value=""class="text ui-widget-content ui-corner-all">
<labelfor="email">Mobile</label>
<inputtype="text"name="Mobile"id="mobile"value=""class="text ui-widget-content ui-corner-all">
<labelfor="password">Password</label>
<inputtype="password"name="password"id="password"value=""class="text ui-widget-content ui-corner-all">
<inputtype="submit"tabindex="-1"style="position: absolute; top: -1000px">
</fieldset>
</form>
</div>
　
<divid="users-contain"class="ui-widget"style="margin: 0auto;">
<h1>Users:</h1>
<tableid="users"class="ui-widget ui-widget-content">
<thead>
<trclass="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 415870503044742
answer 415870503044742

 

Liked By