<!– دکمه برای باز کردن مودال –>
<button id=”sizeGuideBtn”>راهنمای سایز</button>
<!– پنجره مودال –>
<div id=”sizeModal” class=”modal”>
<div class=”modal-content”>
<span class=”close”>×</span>
<h2>راهنمای سایز</h2>
<p>لطفا نوع لباس را انتخاب کنید:</p>
<!– دکمهها برای انتخاب نوع لباس –>
<button class=”sizeOption” onclick=”showSizeChart(‘pants’)”>شلوار</button>
<button class=”sizeOption” onclick=”showSizeChart(‘jacket’)”>کاپشن</button>
<button class=”sizeOption” onclick=”showSizeChart(‘lingerie’)”>لباس زیر</button>
<button class=”sizeOption” onclick=”showSizeChart(‘pajamas’)”>لباس راحتی</button>
<!– جداول سایز –>
<div id=”sizeCharts”>
<div id=”pantsChart” class=”sizeChart” style=”display:none;”>
<h3>جدول سایز شلوار</h3>
<table>
<!– جدول سایز شلوار –>
<tr><th>سایز</th><th>دور کمر</th><th>دور باسن</th><th>قد شلوار</th></tr>
<tr><td>XS</td><td>60-64</td><td>86-90</td><td>98-100</td></tr>
<tr><td>S</td><td>64-68</td><td>90-94</td><td>100-102</td></tr>
<tr><td>M</td><td>68-76</td><td>94-102</td><td>102-104</td></tr>
</table>
</div>
<div id=”jacketChart” class=”sizeChart” style=”display:none;”>
<h3>جدول سایز کاپشن</h3>
<table>
<!– جدول سایز کاپشن –>
<tr><th>سایز</th><th>دور سینه</th><th>دور کمر</th><th>طول آستین</th></tr>
<tr><td>XS</td><td>78-82</td><td>60-64</td><td>57-59</td></tr>
<tr><td>S</td><td>82-86</td><td>64-68</td><td>59-61</td></tr>
<tr><td>M</td><td>86-94</td><td>68-76</td><td>61-63</td></tr>
</table>
</div>
<div id=”lingerieChart” class=”sizeChart” style=”display:none;”>
<h3>جدول سایز لباس زیر</h3>
<table>
<!– جدول سایز لباس زیر –>
<tr><th>سایز</th><th>دور سینه</th><th>کاپ</th></tr>
<tr><td>70</td><td>78-82</td><td>A/B</td></tr>
<tr><td>75</td><td>83-87</td><td>B/C</td></tr>
<tr><td>80</td><td>88-92</td><td>B/C/D</td></tr>
</table>
</div>
<div id=”pajamasChart” class=”sizeChart” style=”display:none;”>
<h3>جدول سایز لباس راحتی</h3>
<table>
<!– جدول سایز لباس راحتی –>
<tr><th>سایز</th><th>دور سینه</th><th>دور کمر</th><th>دور باسن</th></tr>
<tr><td>XS</td><td>78-82</td><td>60-64</td><td>86-90</td></tr>
<tr><td>S</td><td>82-86</td><td>64-68</td><td>90-94</td></tr>
<tr><td>M</td><td>86-94</td><td>68-76</td><td>94-102</td></tr>
</table>
</div>
</div>
</div>
</div>
<!– CSS برای استایل مودال –>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.sizeOption {
margin: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.sizeOption:hover {
background-color: #45a049;
}
.sizeChart {
margin-top: 20px;
}
</style>
<!– JavaScript برای باز کردن و بستن مودال و نمایش جدول سایز –>
<script>
// گرفتن مودال و دکمه
var modal = document.getElementById(“sizeModal”);
var btn = document.getElementById(“sizeGuideBtn”);
var span = document.getElementsByClassName(“close”)[0];
// باز کردن مودال
btn.onclick = function() {
modal.style.display = “block”;
}
// بستن مودال
span.onclick = function() {
modal.style.display = “none”;
}
// بستن مودال وقتی خارج از آن کلیک شود
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}
// تابع برای نمایش جدول سایز بر اساس انتخاب نوع لباس
function showSizeChart(type) {
var allCharts = document.querySelectorAll(“.sizeChart”);
for (var i = 0; i < allCharts.length; i++) {
allCharts[i].style.display = “none”;
}
document.getElementById(type + “Chart”).style.display = “block”;
}
</script>
جین
ست لباس راحتی و تی شرت
شلور زنانه
لباس بیرون
سوشیرت
لباس زیر زنانه
لباس اداری
لباس مجلسی