0

我使用 html 和 javascript 和 jquery 创建了一个弹出窗口，点击按钮，用户必须按下链接才能显示弹出窗口

我需要的是在页面完成加载后立即弹出窗口而不点击任何链接或按钮

谁能帮我这个 ？？？

这是弹出窗口的代码

索引.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>

脚本.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
4

1 回答 1

1

定义一个文档就绪函数并在那里调用您的代码。

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

演示

于 2013-09-11T17:42:01.460 回答