Modal Popup not working

TerenceBristol
New Member
1 0 0

Hello, I have 2 modal pop ups for 1 product page.
I went ahead and made 1 new modal popup for a different product.

Everything is displaying as desired except the new modal i created does not work.

To put context to the code, the new modal and it's parameters are all number 3 (modal3, btn3, etc.)

All the codes are structured identically so I dont know why the last modal isnt working. 

Help would be greatly appreciated


Code on product.liquid to display Modal pop up links depending on product page
(displaying properly but 3rd modal does not pop up when clicked)

   {% for option in product.options_with_values %}
                <div class="product-variant selector-wrapper hidden">
                  <label for="product-{{ option.name | downcase | strip }}">{{ option.name }}</label>
                  <select class="product-variants" id="product-{{ option.name | downcase | strip }}">
                    {% for value in option.values %}
                      <option {% if option.selected_value == value %}selected{% endif %}>{{ value }}</option>
                    {% endfor %}
                  </select>
                  
                </div>
              
              
              
              	{% assign option_name = option.name | downcase | strip %}
              
              {% if product.tags contains 'clip in' %}              
                {% if option_name == "length" %}
              	<div class="popup-btn-block">
                  		<a class="popup-btn btn btn-link image-link" id="myBtn" onclick="return false;">Which length is for me?</a>
              	</div>
                {% endif %}

                {% if option_name == "thickness" %}
                <div class="popup-btn-block">
                  <a class="popup-btn btn btn-link image-link" id="myBtn2" onclick="return false;">Which thickness is for me?</a>
                </div>
                {% endif %} 
              {% endif %}
              
              
               {%if product.tags contains 'ponytail' %}              
                {% if option_name == "length" %}
              	<div class="popup-btn-block">
                  		<a class="popup-btn btn btn-link image-link" id="myBtn3" onclick="return false;">Which length is for me?</a>
              	</div>
                {% endif %}
               {% endif %}
             
              	
   
              {% endfor %}

 
Code on product.liquid for the modals

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

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p><img src="https://cdn.shopify.com/s/files/1/0257/0125/3168/files/Length_guide.jpg?v=1620193009"></p>
      </div>

    </div>
    
    <div id="myModal2" class="modal2">

      <!-- Modal content -->
      <div class="modal-content2">
        <span class="close2">&times;</span>
        <p><img src="https://cdn.shopify.com/s/files/1/0257/0125/3168/files/Thickness_Guide.jpg?v=1620193009"></p>
      </div>

    </div>
    
  <div id="myModal3" class="modal3">

      <!-- Modal content -->
      <div class="modal-content3">
        <span class="close3">&times;</span>
        <p><img src="https://cdn.shopify.com/s/files/1/0257/0125/3168/files/Ponytail_Length_Guide2.jpg?v=1620795512"></p>
      </div>

    </div>
    
 

    <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 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";
//       }
//     }
    
    
    // Get the modal
    var modal2 = document.getElementById("myModal2");

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

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

    // When the user clicks the button, open the modal 
    btn2.onclick = function() {
      modal2.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span2.onclick = function() {
      modal2.style.display = "none";
    }

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

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

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

    // When the user clicks the button, open the modal 
    btn3.onclick = function() {
      modal3.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span3.onclick = function() {
      modal3.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";
//       }
//     }
    
    </script>



code on css_main.scss.liquid (linked to the modals on product.liquid)

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  padding-bottom: 100px;
  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 */
}

/* The Modal (background) */
.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  padding-bottom: 100px;
  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 */
}

/* The Modal (background) */
.modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  padding-bottom: 100px;
  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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Modal Content */
.modal-content2 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Modal Content */
.modal-content3 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.modal-content p {
    text-align: center;
}

.modal-content2 p {
    text-align: center;
}

.modal-content3 p {
    text-align: center;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button */
.close2 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close2:hover,
.close2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button */
.close3 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close3:hover,
.close3:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



 

0 Likes