当有人去它的时候，如何在我的主页上自动弹出图像？ [英] How do I make an image automatically popup on my main page when someone goes to it?
问题描述
我想让某个图片在有人转到我们的主页时自动弹出。一个他们可以点击关闭后，他们已经看到它。有人可以告诉我如何做到这一点，不需要大量的编码。谢谢！
我会用jQuery来做这件事（我敢打赌，你也使用jQuery作为你的模板:)） 确保您在页面中调用jQuery库，我建议将它放在 < / body> 标记和所有脚本。
例如
<！doctype html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title>文档< / title>
< / head>
< body>
<！ - 让我们将下面的div称为POPUP FRAME - >
< div id =popup>
<！ - 这里是图片 - >
< img src =http://i.imgur.com/cVJrCHU.jpgalt =popup>
<！ - 现在这是关闭弹出框的按钮 - >
< button id =close>关闭按钮< /按钮>
<！ - 最后我们关闭POPUP FRAME - >
<！ - 其中的所有内容都会显示在弹出框内，因此您可以添加更多内容，而不仅仅是图片 - >
< / div>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script>
< script>
//你的jquery脚本在这里
< / script>
< / body>
< / html>
这将显示一段代码，如果您想简单地显示图片，请将<直接在< img> 标记上显示code> id =popup。
现在，我们来看一个例子...代码很容易理解：
//用这个第一行我们说：当页面加载时（文档已准备好）运行以下脚本
$（document）.ready（function（）{
//选择POPUP FRAME并显示
$（＃popup）。hide（）。fadeIn（1000）;
//点击id =close的按钮时关闭POPUP
$（＃close）。on（click，function（e）{
e.preventDefault（）;
$（＃popup）。fadeOut（1000）;
}）;
}）;
脚本的行为如下：加载页面时， < div id =popup> 显示出来，如果点击 id =close的按钮，弹出被隐藏。在< div id =popup> 内添加任何你想要的内容，它会显示在弹出窗口中。
< h2> CSS：超级重要！
/ *我们需要使用CSS设置样式它被放置为一个常见的弹出窗口* /
#popup {
display：none;
位置：绝对;
margin：0 auto;
top：50％;
剩下：50％;
transform：translate（-50％，-50％）;
z-index：9999;
$ b 你可以在这个实例中看到它与HTML一起工作： p>
http://jsfiddle.net/Lp9edyg5/1/
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!
解决方案 I would do this with jQuery (and I bet you're using jQuery for your template too :) )
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.
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.
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.
The CSS: SUPER IMPORTANT!
/*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:
http://jsfiddle.net/Lp9edyg5/1/
这篇关于当有人去它的时候，如何在我的主页上自动弹出图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
