How to show popup on page load using JQuery

Introduction
In this article i will show you how a popup window appears with some controls or text message when first or each time window load . I will give you an example of modal pop window on page load.  .

Description 
In previous article i explained how to show modal pop using JQuery. Here we use same article for modal popup but something change in JQuery function. In this article i will use ready( ) function of document object. In JQuery, if you want to execute some functions and operations on page load then use $(document).ready (function here).


Source Code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pageloadmodal.aspx.cs" Inherits="pageloadmodal" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js" ></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>

    <script>

        $(function () {
            $(document).ready(function () {

                $('#popup').dialog({
                    title: "JQuery popup model",
                    width: 450,
                    height: 250,
                    modal: true,
                    button: {
                        close: function () {
                            $(this).dialog('close');

                        }
                    }

                });
            });


        })
    </script>





</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="popup" title="page load modal popup" style="display:none">
            <b>Today News:</b>
            Currently launched windows 10 professional version

        </div>
 
    </div>
    </form>
</body>
</html>


Code Generate the following output

How to show popup on page load using JQuery


How to show popup on page load using JQuery How to show popup on page load using JQuery Reviewed by Jacob Lefore on September 03, 2015 Rating: 5

No comments