Thursday, 22 August 2013

Calling .aspx page in JQuery popup message

       1)      Download the below JQuery files from JQuery.com and paste the  below JQuery files to JQScripts folder
        jquery-ui-1.9.1.custom.min.js
        jquery-latest.js

        2)      Do the same for following file also
         jquery-ui-1.9.1.custom.css

         3)      Copy and paste the “images” folder to Css

          4)      Load the script and CSS files, in which page you want to display JQuery Model pop up
<script src="JQScripts/jquery-latest.js" type="text/javascript"></script>
<script type ="text/javascript" src="JQScripts/jquery-ui-1.9.1.custom.min.js"></script>

<link href="Css/jquery-ui-1.9.1.custom.css" rel="stylesheet" type="text/css" />

         5)      Add the following script in script tag of <head> section

$('#openDialog').dialog({
                                                                                title: "Rate plan - More info",
                                                                                //show: "blind",
                                                                                hide: "explode",
                                                                                modal: true,
                                                                                width: 800,
                                                                                height: 250,
                                                                                top: 15
                                                                    });

                                                                    $('#openDialog').load(url, function () {                  
                                                                                $(this).dialog('open');
                                                                    });                       

       6 )      Add the html code in between <form> </form> tag or <body>  </body> tag
<div id="openDialog" style="top:15px !important;"></div>