CODEWITHSUNDEEP
javascriptjqueryhtmlpopupwindow
LebDev
LebDev

Reputation: 467

creating a popup window with jquery just after the page finish the loading without any button to be pressed

i created a popup window using html and javascript and jquery with button click where the user must press on the link to show the popup window

what i need is to make the window popup without clicking on any link or button just after the page finish the loading

can anyone help me with this ???

this is the code for the popup window

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Popup window</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
    <a href="#" class="topopup">Click Here Trigger</a>

    <div id="toPopup"> 

        <div class="close"></div>
        <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
        <div id="popup_content"> <!--your content start-->
            <p>
            TEST FOR THE POPUP WINDOW. </p>
            <br />
            <p align="center"><a href="#" class="livebox">Click Here Trigger</a></p>
        </div> <!--your content end-->

    </div> <!--toPopup end-->

    <div class="loader"></div>
    <div id="backgroundPopup"></div>
</body>
</html>

script.js

jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    /* event for close the popup */
    $("div.close").hover(
                    function() {
                        $('span.ecs_tooltip').show();
                    },
                    function () {
                        $('span.ecs_tooltip').hide();
                    }
                );

    $("div.close").click(function() {
        disablePopup();  // function close pop up
    });

    $(this).keyup(function(event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup();  // function close pop up
        }   
    });

    $("div#backgroundPopup").click(function() {
        disablePopup();  // function close pop up
    });

    $('a.livebox').click(function() {
        alert('Hello World!');
    return false;
    });


     /************** start: functions. **************/
    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }
    /************** end: functions. **************/
}); // jQuery End

Upvotes: 0

Views: 11946

Answers (1)

franchez
franchez

Reputation: 567

Define a document ready function and call your code there.

$(document).ready(function(){
    alert('Hello World!');
});

DEMO

Upvotes: 1

Related Questions