Can't get close button to work on modal box
Question
I'm trying to use a list element to open a modal box, but for some reason the close button is not working, I would also appreciate some advice general advice on my current work. I was following the W3 tutorial for modal box.
The whole HTML:
<body>
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
</div>
<section class="showcase">
<header>
<h1 class="name noselect">Some dude</h1>
</header>
<div class="text">
<h2>Some dude</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<ul class="social">
<li ><a href="#" id="myBtn">About</a>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal.. Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt commodi est deleniti cum distinctio minima dolore impedit eius, adipisci ea tenetur obcaecati iusto, dolorem, quaerat magni eaque rerum amet tempora!</p>
</div>
</div>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
</script>
</body>
</html>
And the CSS:
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
animation-name: backgroundColorPalette;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
html {
height:100%;
}
body {
margin:0;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, rgb(81, 128, 116) 50%, rgb(142, 100, 190) 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
@keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .name
{
color: #fff;
text-transform: uppercase;
font-size: 5em;
}
.showcase
{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.5s;
z-index: 2;
}
.showcase.active
{
right: 300px;
}
.text
{
position: relative;
z-index: 1;
}
.text h2
{
font-size: 4em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3
{
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.social
{
position: absolute;
z-index: 10;
bottom: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.social li a
{
display: inline-block;
font-size: 2em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.5s;
}
.social li
{
list-style: none;
}
.text a:hover
{
letter-spacing: 6px;
}
.social li a:hover
{
transform: scale(0.8) translateY(-15px);
}
/* The Modal (background) */
.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;
}
@media (max-width: 991px)
{
.name h1{
font-size: 6em;
}
.overlay {
height: 5%;
}
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 5em;
}
.text h3
{
font-size: 4em;
}
.text p
{
font-size: 3em;
}
.social,
.social li,
.social li a
{
font-size: 1.5em;
margin: 2px;
}
}
And for some reason, if I try to the following, the close button do work.
<body>
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
</script>
</body>
</html>
2 answers
solution1
2 ACCPTED 2021-07-16 05:46:45
Seems header tag blocks the x button tag because header tag's z-index equal 1000. So when modal is opened I set header 's z-index to 0.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ animation-name: backgroundColorPalette; animation-duration: 30s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } html { height:100%; } body { margin:0; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bg { animation:slide 3s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, rgb(81, 128, 116) 50%, rgb(142, 100, 190) 50%); bottom:0; left:-50%; opacity:.5; position:fixed; right:-50%; top:0; z-index:-1; } .bg2 { animation-direction:alternate-reverse; animation-duration:4s; } .bg3 { animation-duration:5s; } @keyframes slide { 0% { transform:translateX(-25%); } 100% { transform:translateX(25%); } } header { position: absolute; top: 0; left: 0; width: 100%; padding: 40px 100px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; } header .name { color: #fff; text-transform: uppercase; font-size: 5em; } .showcase { position: absolute; right: 0; width: 100%; min-height: 100vh; padding: 100px; display: flex; justify-content: space-between; align-items: center; transition: 0.5s; z-index: 2; } .showcase.active { right: 300px; } .text { position: relative; z-index: 1; } .text h2 { font-size: 4em; font-weight: 800; color: #fff; line-height: 1em; text-transform: uppercase; } .text h3 { font-size: 3em; font-weight: 700; color: #fff; line-height: 1em; text-transform: uppercase; } .text p { font-size: 1.1em; color: #fff; margin: 20px 0; font-weight: 400; max-width: 700px; } .social { position: absolute; z-index: 10; bottom: 200px; display: flex; justify-content: center; align-items: center; } .social li a { display: inline-block; font-size: 2em; background: #fff; padding: 10px 30px; text-transform: uppercase; text-decoration: none; font-weight: 500; margin: 10px; color: #111; letter-spacing: 2px; transition: 0.5s; } .social li { list-style: none; } .text a:hover { letter-spacing: 6px; } .social li a:hover { transform: scale(0.8) translateY(-15px); } /* The Modal (background) */ .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; } @media (max-width: 991px) { .name h1{ font-size: 6em; } .overlay { height: 5%; } .showcase, .showcase header { padding: 40px; } .text h2 { font-size: 5em; } .text h3 { font-size: 4em; } .text p { font-size: 3em; } .social, .social li, .social li a { font-size: 1.5em; margin: 2px; } }
<body> <div class="bg"></div> <div class="bg bg2"></div> <div class="bg bg3"></div> <!-- Delete this div tag </div> --> <section class="showcase"> <header> <h1 class="name noselect">Some dude</h1> </header> <div class="text"> <h2>Some dude</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <ul class="social"> <li ><a href="#" id="myBtn">About</a> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal.. Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt commodi est deleniti cum distinctio minima dolore impedit eius, adipisci ea tenetur obcaecati iusto, dolorem, quaerat magni eaque rerum amet tempora!</p> </div> </div> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </section> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; var header1 = document.getElementsByTagName("header")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; header1.style.zIndex = '0'; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; header1.style.zIndex = '1000'; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; header1.style.zIndex = '1000'; } } </script> </body> <!-- delete this html tag </html> -->
solution2
1 2021-07-16 06:29:58
The header is overriding the span and the div. Put the header style "width" to "fit-content" works.
header
{
position: absolute;
top: 0;
left: 0;
width: fit-content;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Can't close modal box by clicking outside of the modal
Can't get modal to work
jquery modal-dialog button close doesn't work properly
modal close button doesnt work
How can I get my modal box in Bootstrap to close?
The button didn't get fired while clicked on the modal-box
Can't get Bootstrap close button to show
Can't get dynamically created modal to close on click | opens with .parents()
Can't seem to get modal to close on clicking “X”
Modal is not showing and can't close
Related Tags