This article will show you how you can open a jQuery Dialog
Box on button click in asp.net using jQuery. In this I have used jQuery UI to
open the dialog box.
Some of my previous articles are as follows: jQuery
Datepicker Calendar With Restrict Date Range in Asp.net, jQuery
Datepicker Calendar Open On Image Button Click in Asp.net, Autocomplete
Textbox Using jQuery In Asp.Net and C#.Net, jQuery
Datepicker Calendar With Multiple Months in Asp.net, Draggable
GridView Using jQuery in Asp.Net, jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, jQuery
UI Calender Open With LightBox Effect in Asp.Net MVC.
So for this article first we will create a new asp.net
application and add an .aspx page and add the below library reference in header
of the page.
<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 here is the
complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DialogBox.aspx.cs" Inherits="ProjectDemo_Asp.et.DialogBox"
%>
<!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
Dialog Box Open On Button Click In Asp.Net</title>
<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
() {
$("#divdialogbox").dialog({
autoOpen: false
});
$("#opener").click(function () {
$("#divdialogbox").dialog("open");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divdialogbox" title="Basic dialog" style="font-size:60%">
<p>
This is an dialog which will
display information</p>
</div>
<input type="button" id="opener" value="Open Dialog" />
</div>
</form>
</body>
</html>
|
In above code I have a declared I have use dialog function
to open the dialog box. After that I have defined the height and width of the dialog
box.
Now we have done run the page and check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view