Modal that appears once

Asked

Viewed 73 times

1

I have a modal that when the mouse cursor leaves the page it appears a modal, but every time it leaves the page it keeps appearing, I wonder if there is how to verify that from the moment it appeared once it does not appear more until a refresh on the page? Only using HTML and JS 

<!DOCTYPE html>
<html lang="en" onmouseleave="abreModal()">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="style.css">

   <title>Document</title>
   <script type="text/javascript">


      function abreModal() {
          opsc = document.getElementById("openModal").style.opacity = "1";
          disp = document.getElementById("openModal").style.display = 
                 "block";

     }

     function fechaModal(){
          opsc =  document.getElementById("openModal").style.opacity = "0";
          disp =  document.getElementById("openModal").style.display = 
                  "none";

     } 

    </script>
   </head>
  <body>

   <div id="openModal" class="modalDialog">
      <div>
         <a href="#close" title="Close" onclick="fechaModal();" 
                 class="close">X</a>
        <h2>Modal Box</h2>
        <p>1 paragrafo.</p>
        <p>teste teste teste  teste teste teste v</p>
      </div>
     </div>

     </body>
    </html>
javascript html html5 session

1 answer

0

See if that’s what you need:

<!DOCTYPE html>
<html lang="en" onmouseleave="abreModal()">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="style.css">

   <title>Document</title>
   <script type="text/javascript">
    var modalJaAberta = false;
      function abreModal() {
        if (!modalJaAberta) {
            modalJaAberta = true;
              opsc = document.getElementById("openModal").style.opacity = "1";
              disp = document.getElementById("openModal").style.display = "block";
        }

     }

     function fechaModal(){
          opsc =  document.getElementById("openModal").style.opacity = "0";
          disp =  document.getElementById("openModal").style.display = "none";

     }

    </script>
   </head>
  <body>

    <div id="openModal" class="modalDialog" style="display: none;">
      <div>
         <a href="#close" title="Close" onclick="fechaModal();" class="close">X</a>
        <h2>Modal Box</h2>
        <p>1 paragrafo.</p>
        <p>teste teste teste  teste teste teste v</p>
      </div>
    </div>

  </body>
</html>

Initially, I declared the variable modalJaAberta worthwhile false. This means that once you load your page, it will automatically get the value false.

When calling the function abreModal(), it will check the value of this variable. If the value is false, to modal will be opened and will update the value of the variable to true.

Next time calling the function abreModal(), function will do nothing. Because the variable value will be true.

PS: I stylized the modal to work on snippet: style="display: none;". I assume in your project you’re doing it via CSS.

Browser other questions tagged javascript html html5 session

You are not signed in. Login or sign up in order to post.