javascript - 类名未添加到 Div

Question

我正在处理一个弹出模式，当我单击一个按钮时，我添加了一个类，将显示属性从“无”更改为“阻止”。一开始它运行良好，然后我通过 JS 将一些 HTML 附加到正文中，但从那以后它就没用了。

// Open modal
function openModal(clicked_id) {
  var button = document.getElementById(clicked_id);
  var modal = button.getAttribute("data-modal");
  var modalElement = document.getElementById(modal);
  document.body.innerHTML += "<div id='modal-backdrop' class='modal-backdrop'></div>";
  var backdrop = document.getElementById("modal-backdrop");
  backdrop.className += " modal-open";
  modalElement.className += " modal-open";
  // Close Same Modal Event Handlers
  (function() {
    document.getElementById("modal-close").onclick = function(e) {
      closeModal(modalElement, backdrop);
    }
    document.getElementById("close").onclick = function(e) {
      closeModal(modalElement, backdrop);
    }
    document.getElementById("modal-backdrop").onclick = function(e) {
      closeModal(modalElement, backdrop);
    }
  })();
}

从 debuggin 中我可以看到正在选择元素并且类名称已添加到类列表中，但这并未反射(reflect)在计算的 HTML 中。我试着移动线:

 modalElement.className += " modal-open"; 

在线上方:

document.body.innerHTML += "<div id='modal-backdrop' class='modal-backdrop'></div>";

但随后关闭功能停止工作。控制台中没有错误，调试器运行代码就像它工作一样，所以我很难过。我有一支密码笔，可以显示一起购买的所有元素:http://codepen.io/WebDevelopWolf/pen/XMZdBg

Answer 1

不使用 +=(或字符串连接)附加到 body，而是使用 document.createElement() 和 body.appendChild(element) 将新元素附加到 body。这个小改动会让你的模式再次工作。

// Open modal
function openModal(clicked_id) {
  var button = document.getElementById(clicked_id);
  var modal = button.getAttribute("data-modal");
  var modalElement = document.getElementById(modal);
  var backdrop = document.createElement('div');
  backdrop.id="modal-backdrop";
  backdrop.classList.add("modal-backdrop");
  document.body.appendChild(backdrop);
  backdrop.classList.add("modal-open");
  modalElement.classList.add("modal-open");
  // Close Same Modal Event Handlers
  (function() {
    document.getElementById("modal-close").onclick = function(e) {
      closeModal(modalElement, backdrop);
    }
    document.getElementById("close").onclick = function(e) {
      closeModal(modalElement, backdrop);
    }
    backdrop.onclick = function(e) {
      closeModal(modalElement, backdrop);
    }
  })();
}

// Close Modal
function closeModal(modalElement, backdrop) {
  modalElement.className = modalElement.className.replace(/\bmodal-open\b/, '');
  backdrop.className = backdrop.className.replace(/\bmodal-open\b/, '');
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  background: #0881a3;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #666;
  position: relative;
  overflow: hidden;
}

#heading {
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  color: #e1e1e1;
  text-transform: uppercase;
}

h3 {
  text-transform: none;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
  font-size: 13px;
}

#trigger {
  width: 50%;
  margin: 0 auto;
  margin-top: 35px;
  text-align: center;
}

.modal {
  color: #1f4e5f;
  background: #a4e5d9;
  width: 40%;
  margin: 50px auto;
  border-radius: 5px;
  text-align: left;
  -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
  z-index: 1050;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transition: opacity .15s linear;
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  opacity: 1;
  display: none;
}

small {
  text-align: center;
  color: #FFF;
}

.modal-body,
.modal-footer,
.modal-heading {
  padding: 25px 20px;
}

.modal-heading {
  border-bottom: 1px solid #c8f4de;
}

.modal-heading h2 {
  margin: 0;
}

.modal-heading h2 i {
  margin-right: 10px;
}

.modal-heading .close {
  position: absolute;
  right: 20px;
  top: 17px;
  font-size: 28px;
}

.modal-heading .close:hover {
  cursor: pointer;
}

.modal-footer {
  border-top: 1px solid #c8f4de;
  position: relative;
  bottom: 0;
}

.modal-footer button,
#trigger button {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  display: block;
  background-color: #649dad;
  border: 1px solid transparent;
  color: #ffffff;
  font-weight: bold;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#trigger button {
  width: auto;
  margin: 0px auto;
}

.modal-footer button:hover,
#trigger button:hover {
  background-color: #ffffff;
  color: #009ac9;
  border-color: #009ac9;
  cursor: pointer;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  opacity: .5;
  z-index: 0;
  display: none;
}

.modal-open {
  display: block;
}

<script src="https://use.fontawesome.com/f79e01ac29.js"></script>
<div id="heading">
  <h1><i class="fa fa-paw"></i> Akela - The Pure JS Pop-up</h1>
  <h3>A lightweight modal pop-up with no framework dependancy that's mobile friendly.</h3>
</div>

<!--Modal Trigger-->
<div id="trigger">
  <button id="staticbtn" data-modal="static" onClick="openModal(this.id)" class="btn btn-info">Show Static Modal</button><br />
  <small><i class="fa fa-star"></i> Made with the help of Font Awesome <i class="fa fa-star"></i></small>
</div>

<!--Static Modal-->
<div id="static" class="modal" tabindex="-1" role="dialog">
  <div class="modal-content">
    <div class="modal-heading">
      <h2><i class="fa fa-paw"></i> Hello World</h2>
      <div class="close"><i id="close" class="fa fa-close"></i></div>
    </div>
    <div class="modal-body">
      I'm a pop up!
    </div>
    <div id="modalFooter" class="modal-footer">
      <button id="modal-close" type="button" class="btn btn-info">Close</button>
    </div>
  </div>
</div>