[英]Adding close button to auto pop up window
我正在嘗試將自動彈出框添加到網站的主頁。 我已經使用了該站點上一個答案中的代碼,如下所示。 彈出窗口可以正常工作,但是您還可以添加一個關閉按鈕/鏈接嗎? 先謝謝您的幫助。
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>
<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.
});
});
在popup
中添加另一個div,單擊該div即可激活此document.getElementById('popup').style.display = 'none';
。 您可以relatively
簡單地將div relatively
定位到top, right
。
這是在彈出式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/
和更多的小提琴以獲取更多想法
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.