javascript 为自动弹出窗口添加关闭按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19127840/
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
Adding close button to auto pop up window
提问by b-one
I'm trying to add an auto pop up box to the home page of a site. I have used the code from a previous answer on this site and as is follows below. The pop up works just fine but can you also add a close button/link to it? Thanks in advance for the help.
我正在尝试向网站的主页添加一个自动弹出框。我使用了本网站上一个答案中的代码，如下所示。弹出窗口工作正常，但您还可以添加一个关闭按钮/链接吗？在此先感谢您的帮助。
Javascript:
Javascript：
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
The CSS:
CSS：
#popup
{
position:absolute;
z-index:99;
display:block;
top:200px;
left:50%;
width:567px;
height:420px;
margin-left:-250px;
}
and the call:
和电话：
<div id="popup">pop up window</div>
回答by Viswalinga Surya S
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>?
<div id="popup">
<div id='popup-close'>Close</div>
pop up window
</div>
And your jQuery,
还有你的 jQuery，
$(document).ready(function()
{
$('#popup').show('fast'); // This will show the Pop Up in the Page Load
$('#popup-close').click(function(e) // You are clicking the close button
{
$('#popup').hide('fast'); // Now the pop up is hided.
});
});
回答by Hastig Zusammenstellen
Here's a simple way using a 2nd positioned absolute div within your popup div.
这是在弹出 div 中使用第二个定位绝对 div 的简单方法。
Lot's of ways to improve on it and add more stuff.
有很多方法可以改进它并添加更多东西。
function show_popup() {
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
$('.popup-closer').click(function() {
$('#popup').hide();
});#popup {
position: absolute;
z-index: 99;
display: block;
top: 50%; left: 50%; /* if you want to center it do this.. */
transform: translate(-50%, -50%); /* ..and this */
width:150px;
height:225px;
color: white;
background-color: black;
}
.popup-closer {
position:absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
border-radius: 20px;
padding: 5px;
cursor: pointer;
}
.popup-closer:hover {
background-color: white;
}
html, body {
margin: 0; padding: 0;
}<link href="https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popup">
pop up window
<div class="popup-closer"><i class="fa fa-close"></i></div>
</div>If you want it only shown once per user per session or day look into session and local storage. The popup can first check their session storage if they've been served the notice already this session/this day/etc and if so prevent them being shown a 2nd+ time. Same deal if you have the code sitewide and you don't want it popping up every page load.
如果您希望每个用户每个会话或一天只显示一次，请查看会话和本地存储。弹出窗口可以首先检查他们的会话存储，如果他们在这个会话/今天/等已经收到通知，如果是这样，防止他们被显示第二次以上。如果您在站点范围内拥有代码并且不希望它在每个页面加载时弹出，那么同样的交易。
Also, may want to make #popup position: fixed;so when user scrolls page the popup stays with them until they acknowledge and close it.
此外，可能想要制作 #popupposition: fixed;以便当用户滚动页面时，弹出窗口会一直伴随他们，直到他们确认并关闭它。
fiddle
小提琴
https://jsfiddle.net/Hastig/au3xm1oy/
https://jsfiddle.net/Hastig/au3xm1oy/
and additional fiddle for more ideas
以及更多想法的额外小提琴
回答by Thomas Wood
Add another div into the popupthat when clicked activates this document.getElementById('popup').style.display = 'none';. You can relativelyposition the div to the top, rightsimple enough.
将另一个 div 添加到popup单击时会激活它document.getElementById('popup').style.display = 'none';。您可以relatively将 div 定位到top, right足够简单的位置。
