javascript - Content doesn't show in the modal

Question

Content doesn't show in the modal when button was clicked. It only show the modal and the "x" icon but not the modal content.

Html CODE:

                  <!-- The Modal -->
<div class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

CSS CODE: (To style the modal)

.modal {
  display: none;
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative; 
  background-color: white;
  padding: 20px; 
  margin: auto; 
  width: 75%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.close-btn {
  float: right; 
  color: lightgray; 
  font-size: 24px;  
  font-weight: bold;
}
.close-btn:hover {
  color: darkgray;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

JavaScript CODE: (To show the modal and for the "x" icon)

let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
  modal.style.display = "block"
}
closeBtn.onclick = function(){
  modal.style.display = "none"
}
window.onclick = function(e){
  if(e.target == modal){
    modal.style.display = "none"
  }
}

Well I don't know how to fix cause everything is fine, dunno what's the cause of it, oh and the modal-content don't even have a display: none; property. Thx in advance.

标签： javascripthtmlcss

Answer 1

您的代码工作正常。只需添加一个带有 id 的按钮modal-btn即可根据您的 javascript 代码切换可见性。运行下面的代码片段以查看工作示例。

let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function() {
  modal.style.display = "block"
}
closeBtn.onclick = function() {
  modal.style.display = "none"
}
window.onclick = function(e) {
  if (e.target == modal) {
    modal.style.display = "none"
  }
}

.modal {
  display: none;
  position: fixed;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background-color: white;
  padding: 20px;
  margin: auto;
  width: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.close-btn {
  float: right;
  color: lightgray;
  font-size: 24px;
  font-weight: bold;
}

.close-btn:hover {
  color: darkgray;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

<button id="modal-btn">Open Modal</button>
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>