Несколько всплывающих модальных коробки

Question

Я создал страницу с DIV, который при нажатии производится всплывающее окно всплывающее модальное согласно это как - http://www.w3schools.com/howto/howto_css_modals.asp

код у меня до сих пор является:

JS -

// Get the modal 
var modal = document.getElementById('myModal'); 


// Get the button that opens the modal 
var btn = document.getElementById("drawer1"); 


// 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"; 
    } 
} 

CSS -

/* 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 { 
    position: relative; 
    background-color: #fefefe; 
    margin: auto; 
    padding: 0; 
    border: 1px solid #888; 
    width: 80%; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    -webkit-animation-name: animatetop; 
    -webkit-animation-duration: 0.4s; 
    animation-name: animatetop; 
    animation-duration: 0.4s 
} 
/* Add Animation */ 

@-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 
    } 
} 
/* The Close Button */ 

.close { 
    color: white; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 
.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
.modal-header { 
    padding: 2px 16px; 
    background-color: #5cb85c; 
    color: white; 
} 
.modal-body { 
    padding: 2px 16px; 
} 
.modal-footer { 
    padding: 2px 16px; 
    background-color: #5cb85c; 
    color: white; 
} 
#drawer1 { 
    position: absolute; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
    width: 22.5%; 
    height: 9.5%; 
    top: 5%; 
    left: 2%; 
} 
#drawer2 { 
    position: absolute; 
    border-style: solid; 
    border-width: 2px; 
    border-color: red; 
    width: 22.5%; 
    height: 9.5%; 
    top: 5%; 
    left: 26.5%; 
} 

HTML -

<!-- Trigger/Open The Modal --> 
<div id="drawer1"></div> 

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

    <!-- Modal content --> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">×</span> 
     <h2>Modal Header</h2> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the Modal Body</p> 
     <p>Some other text...</p> 
    </div> 
    <div class="modal-footer"> 
     <h3>Modal Footer</h3> 
    </div> 
    </div> 

</div> 


<div id="drawer2"></div> 

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

    <!-- Modal content --> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">×</span> 
     <h2>Modal Header</h2> 
    </div> 
    <div class="modal-body"> 
     <p>Sodjshdjhfjhsdfjhsdjhfjdy</p> 
     <p>kjbhdfkjbfkjdnbskjfnbdskjbf</p> 
    </div> 
    <div class="modal-footer"> 
     <h3>Modal Footer</h3> 
    </div> 
    </div> 

</div> 

Это прекрасно работает для одного DIV, но то, что я действительно хочу, чтобы иметь несколько дивы на странице, которые будут каждый открыть свое собственное модальное окно.

Есть ли способ сделать это, используя этот код, или мне придется посмотреть на другой подход?

Answer 1

Если вы хотите иметь несколько модалов, то вы должны создать класс, который обертывает функционально. В каждом классе у вас есть ссылка на отображаемый элемент dom и методы удаления и добавления его со страницы.

т.е.

function modal(title, description,) { 
    this.element = //create element 
} 
modal.prototype = { 

destroy and add methods 
}