Open jQuery dialog box on click on Button Asp.Net MVC

In this tutorial we have explain how to Open jQuery dialog box on click on Button Asp.Net MVC,There are lots of benefits to gathering information by opening a dialog box instead of sending your user to another page. Fortunately, jQuery and ASP.NET MVC make it easy to do.

To use the jQueryUI dialog plug-in you’ll need to add the jQuery and the jQueryUI libraries to your project. For most scenarios where you’ll use the dialog plug-in, you’ll also need a Web service to deliver the HTML your dialog will display. I’ve assumed an ASP.NET MVC project for my sample code but, if you’re working in an ASP.NET WebForms project, you can use the ASP.NET Web API.

Now we are create jquery code for  how to open dialog and how to close dialog with div element with css class and id attribute

First in head section you are need to add Jquery plugin

<script src=”~/Scripts/jquery-1.7.1.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
$(“#OpenDialogBox”).click(function (e) {
ShowDialogBox(false);
$(“.dialog_box”).draggable();
$(“.dialog_box”).resizable();
});

$(“#btnCancel”).click(function (e) {
HideDialogBox();
});

$(“#btnSubmit”).click(function (e) {

HideDialogBox();
});
});
function ShowDialogBox(M) {
$(“#style_overlay”).show();
$(“#dialog”).fadeIn(250);

if (M) {
$(“#style_overlay”).unbind(“click”);
}
else {
$(“#style_overlay”).click(function (e) {
HideDialogBox();
});
}
}
function HideDialogBox() {
$(“#style_overlay”).hide();
$(“#dialog”).fadeOut(250);
}
</script>

Now we are add css property to html element to set the dialog box width and height

<style>
.dialog_overlay {
display: none;
padding: 1;
left: 1;
height: 100%;
width: 100%;
margin: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=14);
-moz-opacity: .14;
top: 1;
right: 1;
bottom: 1;
z-index: 100;
}
.dialog_box {
display: none;
position: fixed;
width: 350px;
height: 150px;
top: 45%;
left: 45%;
margin-left: -1750px;
margin-top: -95px;
background-color: #ffffff;
border: 1px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
border-radius: 9px;
}
.dialog_title {
width:100%;
height: 30px;
padding: 0px;
font-size:18px;
background-color:green;
}
.tblContent {
width:100%;
height:100%;
}
table th, td {
width: 30%;
height: 25px;
}
table tr {
width: 100%;
height: 30px;
}
.btn {
height: 27px;
width: 30%;
font-size:10px;
border-radius: 3px;
text-align: center;
}
.tblfooter {
width:40%;
height:25px;
}
</style>

Now add the html element in which we can display the dialog box with the cancel and submit button and also we can display overlay while the dialog is open.

When you are click on OpenDialog button the dialog can be open

<input type=”button” id=”OpenDialogBox” value=”OpenDialog” />

<div id=”dialog” class=”dialog_box”>
<div class=”dialog_title”>
Header
</div>
<div class=”tblContent”>
<table style=”width:100%”>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
<tr>
<td>
<input id=”btnSubmit” type=”button” class=”btn” value=”Submit” />
</td>
<td>
<input id=”btnCancel” type=”button” class=”btn” value=”Cancel” />
</td>
</tr>
</table>
</div>
</div>

Now , when you click on submit button the below dialog box will be open

Open jQuery dialog box on click on Button Asp.Net MVC

SEE MORE

Leave a Reply

Your email address will not be published. Required fields are marked *