This article will show you how you can open a jQuery message
open as modal dialog box in asp.net without refresh with ok button. In this I have
used jQuery ui top open the dialog box using jquery on click of asp.net button.
Some of my previous articles are as follows: jQuery
DatePicker Calendar With Slide Down and Slide Up Effect In Asp.Net, Shopping
Cart Example to Drag and Drop Item in Cart In Asp.Net MVC Using jQuery, jQuery
Ajax Cascaded DropdownList in Asp.net MVC Using C#.Net, Password
Strength Validation in Asp.net MVC Using jQuery, Bind
jQuery DatePicker Calendar In MVC WebGrid and Retrive Value Using Asp.net MVC,
C#.Net, Resizable
Gridview Using jQuery in Asp.Net.
So for this article first we will create a new asp.net
application and add the below reference in our page header.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
|
Now add the below mention code into your page.
<script>
function
ShowMessageBox() {
$("#messageBox").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
return
false;
}
</script>
|
For preventing the refresh I have written return false at the end of the function.
Now we will add a div control and an asp.net button control
and call the jQuery function on onclientclick event of the asp.net button. Now merge
all the code your page code will look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery
Message Open As Modal Dialog Box In Asp.Net Without Refresh With Ok Button</title>
<style>
body
{
font-size:
11px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
function
ShowMessageBox() {
$("#messageBox").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
return
false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Show Message" OnClientClick="javascript:return ShowMessageBox();" />
<div id="messageBox" title="jQuery MessageBox In Asp.net" style="display: none;">
<h3>
This is a jquery demo messagebox
in asp.net.
</h3>
</div>
</form>
</body>
</html>
|
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view