類名不被添加到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我可以看到這個元素被選中和類名添加到類列表，但這不會反映在計算的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>