Pop up Modal that activates on multiple buttons

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

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

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: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

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

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.)

1 Like

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

I didn’t put getElementsByClassName in my sentence :wink:

I used those words very, very specifically…


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" }
1 Like

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

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.