This article I will show you how you can create dialog box
open with blind and close with explode effect in Asp.Net using jQuery. In this dialog
or message box will open with slide down effect and when you close it will
close with explode effect.
Some of my previous articles are as follows: jQuery
Digital Clock For Asp.Net, MVC and HTML Applications, Auto
Scroll While Dragging Item Using jQuery In Asp.Net MVC, jQuery
Tabs Collapse Control Using jQuery In Asp.Net MVC, MVC2, MVC3, MVC4 and MVC5,
jQuery
Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC,
jQuery
Drag and Drop Item Functionality In Asp.Net MVC, jQuery
Slider and Range Slider Plugins, Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, Validate
DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net.So for this article first we will create a new asp.net application and add the below library and css reference in header of the page.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/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.4/jquery-ui.js"></script>
|
<script>
$(function () {
$("#divDialogBox").dialog({
autoOpen: false,
show: {
effect: "blind",
duration:
1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#btnOpenMessage").click(function () {
$("#divDialogBox").dialog("open");
});
});
</script>
|
This code is responsible for showing dialog box with two
effect. Here is the complete code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Dialog Box
Open with Blind and Close With Explode Effect in Asp.Net</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/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.4/jquery-ui.js"></script>
<script>
$(function () {
$("#divDialogBox").dialog({
autoOpen: false,
show: {
effect: "blind",
duration:
1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#btnOpenMessage").click(function () {
$("#divDialogBox").dialog("open");
});
});
</script>
</head>
<body>
<div><h3>Open Dialog Box</h3></div>
<div id="divDialogBox"
title="Welcome
to jQuery">
<p>This is a welcome
message for the readers of this blog articles.</p>
</div>
<input type="button" value="Show
Message" id="btnOpenMessage" />
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view