popup box loader jquery

<head runat="server">
    <title>Untitled Page</title>
   
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
        
        <!-- you can have your own style -->
        <style>
        body {
            font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
            font-size: .8em;
        }
        
        /* dialog div must be hidden */
        #basicModal{
            display:none;
        }
        
        </style>
 
 
</head>





<body>
  
  
   
<!-- sample content in your page -->
<div>You can click the button.</div>
<input type='button' value='Click here' id='showDialog' />

<!--
    -this time, we don't have the dialog html in the body, it is in another url
    -we use the image loader to add some good effect when the system loads the url (after user click)
-->
<img src="37.gif" id="imgLoader" style="display:none; background-position:center;" />

<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
// show the dialog on click of a button
$( "#showDialog" ).click(function(){

    /* here you can specify the url */
    var url = "HTMLPage.htm";
    
    /* container of the content loaded from a url */
    var tag = $("<div></div>");
    
    /* show the image loader */
    $('#imgLoader').show();
    
    $.ajax({
        url: url,
        success: function( data ) {
        
            tag.html(data).dialog({
                modal: true,
                title: "Content is loaded from a URL!",
                width: 600,
                height: 450,
                close: function(){
                     tag.dialog('destroy').remove()
                }
            }).dialog('open');

            /* hide the image loader */
            $('#imgLoader').hide();
            console.log("success!");
        }
    });
    
});
</script>
    

 
</body>

Comments

Post a Comment