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 %}
{% assign option_name = option.name | downcase | strip %}
{% if product.tags contains 'clip in' %}
{% if option_name == "length" %}
Which length is for me?
{% endif %}
{% if option_name == "thickness" %}
Which thickness is for me?
{% endif %}
{% endif %}
{%if product.tags contains 'ponytail' %}
{% if option_name == "length" %}
Which length is for me?
{% endif %}
{% endif %}
{% endfor %}
Code on product.liquid for the modals
×
×
×
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;
}