堆栈内存溢出
  简体   繁体   English

无法关闭按钮来处理模态框

[英]Can't get close button to work on modal box

 原文  2021-07-16 05:32:57  3   2    javascript/ html/ css

问题描述

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.我正在关注模式框的 W3 教程。

The whole HTML:整个 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">&times;</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:和 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">&times;</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 个解决方案

解决方案1
 2 已采纳  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.似乎header标记阻止了 x button 标记，因为header标记的z-index等于 1000。所以当打开模态时，我将header的z-index为 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">&times;</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> -->

解决方案2
 1  2021-07-16 06:29:58

The header is overriding the span and the div.标题覆盖跨度和 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;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无法通过在模态外部单击来关闭模态框 - Can't close modal box by clicking outside of the modal 无法获得模态工作 - Can't get modal to work jQuery模式对话框按钮关闭无法正常工作 - jquery modal-dialog button close doesn't work properly 模式关闭按钮不起作用 - modal close button doesnt work 如何关闭Bootstrap中的模式框？ - How can I get my modal box in Bootstrap to close? 点击模态框时，按钮没有被触发 - The button didn't get fired while clicked on the modal-box 无法显示Bootstrap关闭按钮 - Can't get Bootstrap close button to show 无法动态创建模态以单击时关闭| 以.parents（）打开 - Can't get dynamically created modal to close on click | opens with .parents() 单击“X”时似乎无法关闭模式 - Can't seem to get modal to close on clicking “X” 模态未显示且无法关闭 - Modal is not showing and can't close
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM