Display modal pop up before user clicks on menu items Javascript native

Question

I need to put a modal in native Javascript to tell the user "You are about to leave the sales page". That will happen if the user click on the menu items that are in a page-header class. So if the user wants to click in the menu links, the modal will appears and if the user accepts the stay, will stay, if not he will leave in the link he clicked.

function myFunction() {
    var x = document.getElementsByClassName("page-header");
    if(x == true){
        return "Are you sure you want to navigate away from this page?\nAll unsaved changes will be lost.";
    }
} 

<ul class="page-header">
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul> 

Answer 1

Please check here, may be you are looking for this. Plunker demo

$(document).ready(function(){
    $('#backPage').on('click',function(){
      var userConfirmation = confirm("Your data may be lost");
      if(userConfirmation){
        return window.location.href="index.html";
      }else
        return false;
    });
 });