3

I used onload="myFunction()" on body tag, And I used javascript code like this

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>

The above code is showing popup when the browser is loaded. And I also used onunload and onmouseout events.

halfer
  • 19,824
  • 17
  • 99
  • 186
Manoj Balakonda
  • 128
  • 1
  • 11
  • Check this http://v4-alpha.getbootstrap.com/components/modal/ – Roy Bogado Feb 24 '17 at 09:20
  • @Roy Thanks for reply, I want to do this using pure javascript. – Manoj Balakonda Feb 24 '17 at 09:24
  • I don't understand, you need the pop up show on the close tab? Where is the id of the tab? you need to trigger mouseenter event on the tab for show the popup – Roy Bogado Feb 24 '17 at 09:27
  • Can you please show the code of the tab? which tap where is the tab in your code? – Teocci Feb 24 '17 at 09:29
  • 1
    your question is not clear, please explain what exactly you want? I dont know who up vote it even its not clear!!! – Muhammad Feb 24 '17 at 09:47
  • Have you tried to use the `$(window).unload(function() { //do stuff });` function instead of the onload? – Serge Inácio Feb 24 '17 at 09:49
  • Does this answer your question? [Best way to detect when a user leaves a web page?](https://stackoverflow.com/questions/147636/best-way-to-detect-when-a-user-leaves-a-web-page) – ggorlen Jan 04 '20 at 13:52

2 Answers2

2

If the goal is to display a message to the user then the solution is a very simple fix.

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

returning false with this event handler allows you to create a popup message with alert(""); and prevents the user from leaving the page until they click a confirmation

Mr. Reddy
  • 1,073
  • 6
  • 8
0

Try this code probably will be helpful.

Note: If you also want to use the function onmouseout just remove the comments in the respective lines

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>
Teocci
  • 7,189
  • 1
  • 50
  • 48