Html 当有人访问它时，如何在我的主页上自动弹出图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26131542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an image automatically popup on my main page when someone goes to it?
提问by user3376481
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!
当有人访问我们的主页时，我想要一个图像自动弹出。一个他们可以在看到后点击关闭的。有人可以告诉我如何做到这一点，不需要大量的编码。谢谢！
回答by Frondor
I would do this with jQuery (and I bet you're using jQuery for your template too :) )
我会用 jQuery 来做到这一点（我敢打赌你也在为你的模板使用 jQuery :)）
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.
确保您在页面中调用 jQuery 库，我建议将其放置在</body>标记之前和所有脚本的下方。
for example
例如
<!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>
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.
这将显示一段代码，如果您只想显示图像，则id="popup"直接将其放在您的<img>标签上。
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);
});
});
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.
脚本的行为是这样的：当页面加载时，里面的内容<div id="popup">显示出来，如果id="close"点击按钮，则隐藏弹出窗口。在这个里面添加你想要的任何东西<div id="popup">，它会显示在弹出窗口中。
The CSS:SUPER IMPORTANT!
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;
}
You can see it working along with the HTML on this live example:
您可以在这个实时示例中看到它与 HTML 一起工作：
