Pop up Modal that activates on multiple buttons

[radband98]

Right now ive got a pop up modal built with ID’s so i can only open that modal with one button however i want to use the same modal on multiple buttons across the page. i think i have to do this with classes rather than ID’s but i dont know how to recode the script to fit this

here is my html

<button id="myBtn" class=" btn btn-light">
click here
</button>

    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content"> <span class="close">&times;</span>
            <?php echo do_shortcode(); ?>
        </div>
    </div>

here is my css

 .modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 35;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: hidden;
     /* 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/Box */
 
 .modal-content {
     background-color: #fefefe;
     margin: 15% auto;
     /* 15% from the top and centered */
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
     /* Could be more or less, depending on screen size */
     max-width: 800px;
 }
 /* The Close Button */
 
 .close {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
 }

here is the java script

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

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on 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";
  }
}

any advice would be appreciated

[m_hutley]

@radband98

built with ID’s so i can only open that modal with one button

@radband98

multiple buttons across the page

So that’s a class, rather than an id. Invent a class name, and apply it to your buttons.

@radband98

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

If the event target’s classList contains yourclassnamehere, the modal’s style display is set to block.

(Hint: I have structured that sentence and used those specific words for a reason.)

[radband98]

ive invented a class and used the getElementsByClassName and it didnt work at all

[m_hutley]

I didn’t put getElementsByClassName in my sentence

I used those words very, very specifically…

[m_hutley]

Spoiler:

—	—	—	—	—	—	—	—	—	—	—	—	—
If	the event	target’s	classList	contains	yourclassnamehere	,	the modal’s	style	display	is set to	block	.
if (	event	.target	.classList	.contains(	"yourclassnamehere"	)) {	modal	.style	.display	=	"block"	}

[radband98]

im going to be honest here i dont understand i dont know alot of javascript

[m_hutley]

Take the line of code in the spoiler, and put it inside the window.onclick function, after the end of the first if.