如何在用戶試圖離開頁面窗口或關閉標籤時顯示彈出窗口？

Question

我體上的標籤使用onload="myFunction()"， 我使用JavaScript代碼這樣

function myFunction() { 
    //alert("Page is loaded"); 
    document.getElementById("test").style.display = "block"; 
} 

function hidePopup() { 
    // alert("Hidden"); 
    document.getElementById("test").style.display = "none"; 
} 

<div id="test" style="z-index: 20000;display: none;"> 
    <div id="popup"> 
    <div id="close" onclick="hidePopup()">x</div> 
    <div id="popup_img" class="hos_modal" style="height:900px; width:900px; margin:0 auto;"> 
     <a href="javascript:void()" target="_blank"><img src="files/image.jpg" alt="free trial" style="width: auto; height: auto;"></a> 
    </div> 
    </div> 
</div> 

上面的代碼被表示在加載瀏覽器時彈出。我還用onunload和onmouseout事件。

Answer 1

如果目標是顯示一條消息給用戶，然後該解決方案是一個非常簡單的修復。

window.onbeforeunload = function() { 
    alert("Wait don't go!"); 
    return false; 
} 

返回與此事件處理程序錯誤，您可以創建一個彈出消息alert("");並阻止用戶離開網頁，直到他們點擊確認

Answer 2

試試這個代碼可能會有幫助。

注意：如果你也想使用的功能onmouseout只是刪除在各條線的評論

function hidePopup() { 
 
    // alert("Hidden"); 
 
    document.getElementById("test").style.display = "none"; 
 
} 
 

 
window.onload = function() { 
 
    console.log('window - onload'); 
 

 
}; 
 

 
document.getElementById("tab_3").addEventListener("mouseover", mouseOver); 
 
// document.getElementById("tab_3").addEventListener("mouseout", mouseOut); 
 

 
function mouseOver() { 
 
    console.log('window - onmouseover'); 
 
    document.getElementById("test").style.display = "block"; 
 
} 
 

 
//function mouseOut() { 
 
    //console.log('window - onmouseout'); 
 
    //document.getElementById("test").style.display = "none"; 
 
//}

/* Style the tab */ 
 

 
div.tab { 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
} 
 

 

 
/* Style the links inside the tab */ 
 

 
div.tab a { 
 
    float: left; 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 

 
/* Change background color of links on hover */ 
 

 
div.tab a:hover { 
 
    background-color: #ddd; 
 
} 
 

 

 
/* Create an active/current tablink class */ 
 

 
div.tab a:focus, 
 
.active { 
 
    background-color: #ccc; 
 
} 
 

 

 
/* Style the tab content */ 
 

 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
}

<div class="tab"> 
 
    <a id="tab_1" href="#" class="tablinks">Simple Tab</a> 
 
    <a id="tab_2" href="#" class="tablinks">Simple Tab 2</a> 
 
    <a id="tab_3" href="#" class="tablinks" onmouseover="mouseOver()" onmouseout="mouseOut()">Triggerer Tab</a> 
 
</div> 
 

 

 

 
<div id="London" class="tabcontent"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div> 
 

 
<div id="test" style="z-index: 20000;display: none;"> 
 
    <div id="popup"> 
 
    <div id="close" onclick="hidePopup()">x</div> 
 
    <div id="popup_img" class="hos_modal" style="height:900px; width:900px; margin:0 auto;"> 
 
     <a href="javascript:void()" target="_blank"> 
 
     <img src="http://sit-stand.com/img/cms/animation1.gif" alt="free trial" style="width: auto; height: auto;"></a> 
 
    </div> 
 
    </div> 
 
</div>