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

使用此事件处理程序返回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>

如何在用户尝试离开页面窗口或关闭选项卡时显示弹出窗口？

2 个答案: