添加关闭按钮以自动弹出窗口

Question

我正在尝试将自动弹出框添加到网站的主页。 我已经使用了该站点上一个答案中的代码，如下所示。 弹出窗口可以正常工作，但是您还可以添加一个关闭按钮/链接吗？ 先谢谢您的帮助。

Javascript：

<script type="text/javascript">
function show_popup()
{
  document.getElementById('popup').style.display = 'block'; 
}

window.onload = show_popup;
</script>

CSS：

#popup
{
position:absolute;
z-index:99;
display:block;
top:200px;
left:50%;
width:567px;
height:420px; 
margin-left:-250px; 
}

并致电：

<div id="popup">pop up window</div>

Answer 1

<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>

还有你的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.
    });
});

Answer 2

在popup中添加另一个div，单击该div即可激活此document.getElementById('popup').style.display = 'none'; 。 您可以relatively简单地将div relatively定位到top, right 。

Answer 3

这是在弹出式div中使用第二个绝对div的简单方法。

有很多改进和添加更多内容的方法。

 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> 

如果您希望每个会话每天仅向每个用户显示一次，请查看会话和本地存储。 弹出窗口可以首先检查其会话存储空间，如果在此会话/这一天/这一天等已经向他们发送了通知，并且如果这样做的话，则阻止他们再次显示。 如果您在整个网站上都拥有代码，并且不希望每次加载页面时都弹出该代码，则可以进行同样的处理。

另外，可能要设置#popup position: fixed; 因此，当用户滚动页面时，弹出窗口将一直伴随着它们，直到他们确认并关闭它为止。

小提琴

https://jsfiddle.net/Hastig/au3xm1oy/

和更多的小提琴以获取更多想法

https://jsfiddle.net/Hastig/au3xm1oy/2/