What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

Question

What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

After creating a popup in my HTML page, when I click on the element that triggers it, the popup appears for a brief moment before automatically closing and causing my page to refresh.

Below is the code I am using:

HTML Code :

<a class="lv-footer" id="openPop" href="">Visualiser plus de détails</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
</div>

CSS code :

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

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

.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');
var btn = document.getElementById("openPop");
var span = document.getElementsByClassName("close")[0];

 btn.onclick = function() {
modal.style.display = "block";
 }

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}

I'm experiencing difficulty with this setup. Can you help me identify the issue?

javascript jquery html css popup

Answer 1

Answer №1

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

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

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

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

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

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

.modal {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed positioning */
    z-index: 1; /* Top layer */
    padding-top: 100px; /* Positioning */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scrolling */
    background-color: rgb(0,0,0); /* Fall back color */
    background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

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

/* 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="">See more details</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>

Include event.preventDefault() when button is clicked, as it's an anchor tag. This prevents the default behavior of the anchor tag which redirects.

Answer 2

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

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

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

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

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

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

.modal {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed positioning */
    z-index: 1; /* Top layer */
    padding-top: 100px; /* Positioning */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scrolling */
    background-color: rgb(0,0,0); /* Fall back color */
    background-color: rgba(0,0,0,0.4); /* Black with opacity */
}

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

/* 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="">See more details</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>

Include event.preventDefault() when button is clicked, as it's an anchor tag. This prevents the default behavior of the anchor tag which redirects.

What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

Answer №1

Similar questions

Tips for accessing a variable value within a JavaScript function

applying a margin to the cover div

Ways to display a div when a drop-down box is clicked

Is it possible to transfer a massive number of files using node.js?

Navigate the speech bubble tail by moving or rotating it with your mouse

Having trouble with preventDefault() not working during a keyup event?

Determining the margin-left value of a centrally positioned table

What is the best way to make a gradient fill and rounded border with CSS?

Sending an image to a Kendo popup window triggers a [Request Uri too long 414] error message

Contrasting results when logging an element in Chrome versus IE

Manually initializing Angular bootstrap with async in the Angular script tag

Uh oh! There seems to be an issue with the ClerkJS frontendAPI option. Visit the homepage at https://dashboard.clerk.dev to retrieve your unique Frontend API value

Choosing different elements using identical classes in JQuery

Refreshingly modernizing SVG in Angular

Cannot display GIF file from the SRC directory in a React application

Passing references in React to parent components

What could be causing the sluggish performance of my JavaScript code?

What is the process for retrieving a value from JSON utilizing JavaScript?

Can we create a collection of Vue highcharts components in a library format?

Having difficulty assigning a selected value in select2 using JavaScript with Ajax mode