Hello,
When I add method="POST" (line 147) to my form I lose the effect of closing the modal :
Thank you for your help
When I add method="POST" (line 147) to my form I lose the effect of closing the modal :
PHP:
<?php
?>
<!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%);
}
/*--====== CSS Reset ======--*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
background-color: var(--bg-color);
}
/*--====== 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">
<div class="form-infos">
<form action="#" method="POST">
<h2>Hello 2</h2>
<input class="inp_name" type="text" /><br>
<button class="btn nav_btn close_btn">Close</button>
</form>
</div>
</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', () => {
closeModal(index);
});
});
</script>
</body>
</html>
Thank you for your help