Question

点击 Open Modal 按钮后。它消失了。我没有发现我的代码有任何问题。

代码示例 - 场景

let nrSanckbar = (function(){

                    const modalContent = `<div class="nr-modal-container" class="modal">
                                    <div class="modal-content">
                                      <span class="close">&times;</span>
                                      <p>Some text in the Modal..</p>
                                    </div>
                                  </div>`;
                    
                   
                    document.addEventListener("click",function(e){
                      e.preventDefault();
                      e.stopPropagation()
                      const modal = document.querySelector(".nr-modal-container");
                      if(e.target.classList.contains('close')){
                        console.log(e.target)
                       modal.classList.remove("visible");
                       modal.remove();
                       return false;  
                      }
                    })

                    const shwoModal = function(){
                      document.body.innerHTML = modalContent;
                      const modal = document.querySelector(".nr-modal-container");
                      modal.classList.add("visible");
                      return false;

                    }
    
    
                    

                    return {
                        deleteConfirm: function(data) {
                         shwoModal()
                        },

                    }
                })();

                document.addEventListener("click",function(e){
                  e.preventDefault();
                  e.stopPropagation()
                    if(e.target.classList.contains('open-modal-button')){
                        nrSanckbar.deleteConfirm()
                    }
                })

  .modal {
    position: fixed;
    z-index: 10;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }

  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 5px;
    box-shadow: 0 24px 38px 3px rgba(60, 75, 100, 0.14);
    display:none;
  }

  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .visible {
   display: block;
  }

  .visible > .modal-content {
    display: block;
   -webkit-animation: scale .3s ease-out;
    -moz-animation: scale .3s ease-out;
  }
  
  
@-webkit-keyframes scale {
      0% { opacity: 0; -webkit-transform: scale(1.3); }   
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes scale{
      0% { opacity: 0; -moz-transform: scale(1.3); }   
    100% { opacity: 1; -moz-transform: tscale(1);}
}

<button class="open-modal-button">Open Modal</button>

Answer 1

由于 document.body.innerHTML = modalContent;（因为内部 HTML 包含按钮），您的按钮正在被删除

您应该能够执行类似 document.body.innerHTML += modalContent;

或：document.body.insertAdjacentHTML( 'beforeend', modalContent);

单击“打开模态”按钮后。为什么它消失了？

1 个答案: