<!– دکمه برای باز کردن مودال –>
<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>
جین
ست لباس راحتی و تی شرت
شلور زنانه
لباس بیرون
سوشیرت
لباس زیر زنانه
لباس اداری
لباس مجلسی
Mr. Mackay –
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.