var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } 
 .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 72px; /* 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: 300px; 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 { margin-top: -11px; color: white; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-body { padding: 20px 16px; text-align: center; height: 203px; color: #7f819a; margin-left: 3px; background:#eee; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="myBtn">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> </div> <div class="modal-body"> text </div> </div> </div>

Here is the code of the modal window, there should be several such on the page, each one has a different ID.

Of course, I can simply accumulate the code and change the values ​​of the variables, but how is this not done with a crutch?

    1 answer 1

    1. JQuery connects to the page. If there is an opportunity to use it, we do it, otherwise we read further =)
    2. Buttons are brought to the form <button class="myBtn" data-modal="myModal1">Open Modal</button>
    3. To the container of a modal window we write the corresponding id, in our example 'myModal1', and also add the modal class
    4. In JS, we get not one button, but all using document.getElementsByClassName("myBtn")

    5. Change the button click handler:

       function buttonClick(event) { var id = this.getAttribute('data-modal'); var modal = document.getElementById(id); modal.style.display = 'block'; } for (var i = 0; i < btn.length; i++) { btn[i].onclick = buttonClick; }

    6. For the close buttons, also add the data-modal attribute. The value must match the id attribute of the modal window, which we will close.

    7. The closing buttons also select everything, not just one: var span = document.getElementsByClassName("close");

    8. And the handler for clicking on this span is modified, similar to the open button:

       function spanClick() { var id = this.getAttribute('data-modal'); var modal = document.getElementById(id); modal.style.display = 'none'; } for (var i = 0; i < span.length; i++) { span[i].onclick = spanClick; }

    9. And we also change the last block to work with all modals:

     window.onclick = function(event) { var isModal = (' ' + event.target.className + ' ').indexOf(' modal ') > -1; if (isModal) { event.target.style.display = "none"; } }

    • jsfiddle.net/dxh5kstq/1 - does not work :( - stoner
    • @kiLLro, my mistake. It was necessary to assign onclick for each element of the array (I did not take into account that the native JS returns arrays): jsfiddle.net/oddhz43x . The main answer also corrected. - Viktor
    • Duc doesn't work anyway) Even on your jsfiddle - stoner
    • I apologize, it was necessary to double-check. Recent edits are not saved there. Current version: jsfiddle.net/oddhz43x/1 - Viktor
    • Thank! Everything works :) - stoner