Question

我希望当有人进入我们的主页时，图像会自动弹出。他们在看到它之后可以点击关闭的一个。有人可以告诉我如何做到这一点，不需要大量的编码。谢谢你！

Answer 1

我会用jQuery做这个（我打赌你也在为你的模板使用jQuery :)）

请确保您在页面中调用jQuery库，我建议将其放在</body>标记之前，然后放在所有脚本之下。

例如

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- let's call the following div as the POPUP FRAME -->
<div id="popup">

    <!-- and here comes the image -->
    <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">

        <!-- Now this is the button which closes the popup-->
        <button id="close">Close button</button>

        <!-- and finally we close the POPUP FRAME-->
        <!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
//your jquery script here
</script>

</body>
</html>

这将显示一段代码，如果您只想显示图片，请将id="popup"直接放在<img>标记上。

现在，让我们转到示例......代码很容易理解：

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {

    //select the POPUP FRAME and show it
    $("#popup").hide().fadeIn(1000);

    //close the POPUP if the button with id="close" is clicked
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });

});

脚本的行为如下：加载页面时，<div id="popup">中的内容会显示，如果点击了id="close"的按钮，则弹出窗口会被隐藏。在<div id="popup">中添加您想要的任何内容，它将显示在弹出窗口内。

CSS：超级重要！

/*we need to style the popup with CSS so it is placed as a common popup does*/
    #popup {
            display:none;
            position:absolute;
            margin:0 auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
    }

您可以在此实例中看到它与HTML一起使用：

当有人访问时，如何在我的主页上自动弹出图像？

1 个答案:

CSS：超级重要！

http://jsfiddle.net/Lp9edyg5/1/