將關閉按鈕添加到自動彈出窗口

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

添加另一個DIV中到popup，點擊後激活此document.getElementById('popup').style.display = 'none';。您可以將relatively的位置分配給top, right足夠簡單。

Answer 2

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

下面是使用彈出專區內絕對定位的div一個第二一個簡單的方法。

很多的方法來改善它，並添加更多的東西。

function show_popup() { 
 
    document.getElementById('popup').style.display = 'block'; 
 
} 
 
window.onload = show_popup; 
 
$('.popup-closer').click(function() { 
 
\t $('#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/