在页面完成加载后立即使用 jQuery 创建一个弹出窗口，而无需按下任何按钮

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

本文关键字：窗口 一个 任何 按钮 加载 创建 jQuery      更新时间：2023-09-26

我使用 HTML 和 JavaScript 创建了一个弹出窗口，并使用按钮单击按钮创建了一个弹出窗口，用户必须按下链接才能显示弹出窗口

我需要的是使窗口弹出，而无需在页面完成加载后单击任何链接或按钮

谁能帮我解决这个问题???

这是弹出窗口的代码

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

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

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

演示

相关文章：