jQuery Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC

This article will show you how you can create a jquery animated dialog window with move, resize and explode animation in asp.net mvc. This article we can use in MVC2, MVC3,MVC4, MVC5.

Some of my previous articles are as follows: ser Registration Form With ToolTip Message and Validation Using jQuery, C#.Net in Asp.Net, Link Button or HyperLink With Mouse Tracking ToolTip Using jQuery in Asp.Net, Dynamic Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC, jQuery Message Open As Modal Dialog Box In Asp.Net Without Refresh With Ok Button, 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.

So for this article first we will create a new asp.net mvc application. Now add the below mention library into 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>

Now here is the code to display the dialog box

@{     ViewBag.Title = "jQuery Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC"; }  <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 language="javascript">     $(function () {         $("#dialogBox").dialog({             autoOpen: false,             show: {                 effect: "blind",                 duration: 1000             },             hide: {                 effect: "explode",                 duration: 1000             }         });     });      function OpenDialog() {          $("#dialogBox").dialog("open");     } </script> <style> .dialogBoxFontSize {     font-size:12px; } </style> <div id="dialogBox" title="Basic dialog with explode" class="dialogBoxFontSize">     <p>         This dialog box is appeared after clicking on button. Now click on button to close         it.jQuery Animated Dialog Window With Move, Resize and Eplode Animation In Asp.Net MVC     </p> </div> <input type="button" value="Open Dialog Box" onclick="javascript:OpenDialog();" />

In above code I have added the below mention jquery code to display the dialog box.

<script language="javascript">     $(function () {         $("#dialogBox").dialog({             autoOpen: false,             show: {                 effect: "blind",                 duration: 1000             },             hide: {                 effect: "explode",                 duration: 1000             }         });     });      function OpenDialog() {          $("#dialogBox").dialog("open");     } </script>

Now we have done run the application to check the output.

DOWNLOAD