please add again code here :
<style>
/* Style for the popup */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 2px solid black;
z-index: 1000;
animation: popupAnimation 0.3s ease-out;
max-height: 80%; /* Set maximum height for the popup */
overflow-y: auto; /* Enable vertical scroll when content exceeds max height */
}
/* Style for the overlay */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
/* Animation keyframes */
@keyframes popupAnimation {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* Style for close button */
.close-button {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
font-size: 20px;
background: none; /* Remove background */
border: none; /* Remove border */
}
/* Centering the h2 element and making it bold and underlined */
.popup h2 {
text-align: center;
font-weight: bold;
text-decoration: underline;
}
/* Style for paragraph text */
.popup p {
font-size: 15px;
padding-top: 6px; /* Add top padding */
padding-bottom: 6px; /* Add bottom padding */
}
/* Style for email link */
.email-link {
text-decoration: underline;
}
/* Style for Bra size */
.bra-size, .panties-garter-size {
font-weight: 600; /* Semi-bold */
}
/* Style for even rows */
table tr:nth-child(even) {
background-color: #F6F6F6;
}
/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
.popup {
width: 100%;
}
table {
width: 100% !important;
}
table tr:first-child th,
table tr:first-child td {
font-size: 15px;
font-weight: 800; /* Font size for the first row */
}
table tr:not(:first-child) th,
table tr:not(:first-child) td {
font-size: 15px;
}
/* Adjust font size for the second row on mobile */
table tbody tr:nth-child(2) {
font-size: 20px !important;
}
}
/* Style for the second row on desktop */
table tbody tr:nth-child(2) {
font-size: 20px;
}
/* Style for table header cell containing "Fits (Dress Size)" */
th:nth-child(2) {
text-align: center;
}
/* Style for table data cells containing "0-4" and "4-10" */
td:nth-child(2), /* for "0-4" */
td:nth-child(3) { /* for "4-10" */
text-align: center;
}
</style>
<button type="button" onclick="openPopup()" style="background: none; border: none; text-decoration: underline;">Size Guide</button>
<div class="overlay" id="overlay"></div>
<div class="popup" id="popup">
<h2>SIZE GUIDE</h2>
<p>Our bras and panties&garter are flexible and have adjustable straps.</p>
<h4 class="bra-size">Bra size</h4>
<p>Choose based on the cup size(A , B , C , D , DD) as the band size is flexible</p>
<button type="button" class="close-button" onclick="closePopup()">X</button>
<table border="1">
<tbody>
<tr>
<th colspan="4" style="text-align: left;" class="panties-garter-size">PANTIES & GARTER SIZE</th>
</tr>
<tr>
<th>Sizes</th>
<th>Fits <br> (Dress Size)</th>
<th>Waist<br> (inch)</th>
<th>Hip <br>(inch)</th>
</tr>
<tr>
<td>XS/S</td>
<td>0-4</td>
<td>24-27.5"</td>
<td>34-37.5"</td>
</tr>
<tr style="background-color: #F6F6F6;">
<td>M/L</td>
<td>4-10</td>
<td>28-31.5"</td>
<td>38-40.5"</td>
</tr>
</tbody>
</table>
<p>*Currently 30A, 36D , 38D, 38DD are unavailable Sizes</p>
<p style="margin-top: 10px;">If you have any questions about the size, you can reach out via the live chat or <a href="https://exteasy.shop/pages/contact" class="email-link">email</a> us at <span style="text-decoration: none;">exteasy@exteasy.store</span></p>
</div>
<script>
// Function to open the popup
function openPopup() {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").style.display = "block";
}
// Function to close the popup
function closePopup() {
document.getElementById("overlay").style.display = "none";
document.getElementById("popup").style.display = "none";
}
</script>
