How to fix my popup that closes automatically after opening and refreshes my page?

Question

I created a pop up in my HTML page but when I click my HTML element that launches the Popup, It appears for just second and it closes automatically and my page refreshes

Here's the detailed code that I'm using

HTML Code :

  <a class="lv-footer" id="openPop" href="">Visualiser plus de détails</a>
                <div id="myModal" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <p>Some text in the Modal..</p>
                    </div>

CSS code :

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

and JS code:

var modal = document.getElementById('myModal');

// Get the button that opens the modal
  var btn = document.getElementById("openPop");

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
 btn.onclick = function() {
modal.style.display = "block";
 }

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}

Can you tell me what's the problem ?

The default action for a link (``) is to navigate to the target mentioned by the `href` attribute. An `href` attribute without a target points per default to the actual document. You have to stop the default action of the link to prevent the reload of the page. — Andreas, Dec 30 '18 at 10:50
Also I guess you want `event.target !== modal` in the last eventListener. — Papi, Dec 30 '18 at 10:52

score 0 · Accepted Answer · answered Dec 30 '18 at 10:53

var modal = document.getElementById('myModal');

// Get the button that opens the modal
  var btn = document.getElementById("openPop");

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
 btn.onclick = function(event) {
 event.preventDefault()
modal.style.display = "block";
 }

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

<a class="lv-footer" id="openPop" href="">Visualiser plus de détails</a>
                <div id="myModal" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <p>Some text in the Modal..</p>
                    </div>

Add event.preventDefault() on button click. which is anchor. So it will prevent the functionality of anchor tag that is redirecting.

How to fix my popup that closes automatically after opening and refreshes my page?

1 Answers1