I don't know why when I click on the Download 1 link and the Download 2 button my modal window closes automatically (Test 2) ???
I want my modal window to close only when I click on close.
Thank you for your help
I want my modal window to close only when I click on close.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test Popup Modal</title>
<style>
:root {
--bg-color: #F5F9FC;
--grad-color-1: #00d2ff;
--grad-color-2: #3a47d5;
--gradient: linear-gradient(90deg, var(--grad-color-1) 0%, var(--grad-color-2) 100%);
box-sizing: border-box;
}
/*--====== Common Styles ======--*/
.btn {
background-image: var(--gradient);
color: #fff;
font-size: 1rem;
padding: 0.6rem 1.8rem;
border-radius: 50px;
transition: transform 0.2s ease;
border: none;
}
.btn:hover {
transform: translateY(-2px);
}
/*--====== Modal ======--*/
.modal {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.3s ease;
}
/* when Modal has open class */
.modal.open {
pointer-events: all;
opacity: 1;
visibility: visible;
}
.modal_wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 1.5rem;
min-height: calc(100% - 3rem);
}
.modal_content {
position: relative;
background-color: var(--bg-color);
width: 100vw;
max-width: 800px;
padding: 4rem;
border-radius: 10px;
text-align: center;
overflow: hidden;
transform: scale(0);
transition: transform 0.5s ease;
}
/* when Modal is open then modal-content will... */
.modal.open .modal_content {
transform: scale(1);
}
.modal_body {
margin: 2rem 0 3rem;
}
.modal_body p {
font-size: 1.2rem;
line-height: 1.6;
letter-spacing: 0.8px;
}
.close_btn {
font-size: 1.2rem;
margin: 20px 0;
}
</style>
</head>
<body>
<button class="btn nav_btn">Test 1</button>
<button class="btn nav_btn">Test 2</button>
<!--====== Modal-01 ======-->
<div class="modal">
<div class="modal_wrapper">
<div class="modal_content">
<div id="contact" role="dialog" tabindex="-1">
<div class="form-infos">
<div class="form-infos-container">
<h2>Hello 1</h2>
<button class="btn nav_btn close_btn">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--====== Modal-02 ======-->
<div class="modal">
<div class="modal_wrapper">
<div class="modal_content">
<div id="contact" role="dialog" tabindex="-1">
<form action="#" method="post">
<a href="">Download 1</a>
<button class="btn">Download 2</button>
</form>
<button class="btn nav_btn close_btn">Close</button>
</div>
</div>
</div>
</div>
<script>
const modals = document.querySelectorAll('.modal');
const nav_btn = document.querySelectorAll('.nav_btn');
const close_btn = document.querySelectorAll('.close_btn');
const openModal = (index) => {
modals[index].classList.add('open');
};
const closeModal = (index) => {
modals[index].classList.remove('open');
};
// opening the clicked Modal.
nav_btn.forEach((currnavbtn, index) => {
currnavbtn.addEventListener('click', () => {
openModal(index);
});
});
// closing the current opened Modal.
close_btn.forEach((currCloseBtn, index) => {
currCloseBtn.addEventListener('click', (e) => { //add e in the brackets
e.preventDefault();
closeModal(index);
});
});
// closing the current opened Modal on clicking outside.
window.addEventListener('click', (e) => {
if (e.target.className === 'modal_wrapper') {
modals.forEach((currModal) => {
currModal.classList.remove('open');
});
}
});
</script>
</body>
</html>
Thank you for your help