如何在用户试图离开页面窗口或关闭标签时显示弹出窗口？

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>