当有人访问它时，如何在我的主页上自动弹出图像?-前端问题

How do I make an image automatically popup on my main page when someone goes to it?(当有人访问它时，如何在我的主页上自动弹出图像?)

本文介绍了当有人访问它时，如何在我的主页上自动弹出图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望在有人访问我们的主页时自动弹出一张图片.他们可以在看到后单击以关闭它.有人可以告诉我如何在不需要大量编码的情况下做到这一点.谢谢你！

I want an image to automatically popup when someone goes to our main page. One that they can click to close after they have seen it. Can someone please show me how to do this that doesn't require a ton of coding. Thanks you!

推荐答案

我会用 jQuery 来做这件事(我打赌你也在用 jQuery 作为你的模板:))

I would do this with jQuery (and I bet you're using jQuery for your template too :) )

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

Be sure you're calling the jQuery library in your page, I would recommend to place it just before the </body> tag and BELOW all the scripts.

例如

<!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> 标签上.

This will show up a piece of code, if you want to simply show an image, put the id="popup" directly on your <img> tag.

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

Now, let's move to the example... the code is pretty easy to understand:

//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"> 中添加您想要的任何内容，它会显示在弹出窗口中.

The script behaves like this: When the page is loaded, the content inside <div id="popup"> show up, and if the button with id="close" is clicked, then the pop up is hidden. Add whatever you want inside this <div id="popup"> and it will show inside the popup.

/*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 一起工作:

You can see it working along with the HTML on this live example:

这篇关于当有人访问它时，如何在我的主页上自动弹出图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！