مودال تصویر (Image Modal)
مودال تصویر یعنی عکس بزرگ شده داخل پاپاپ. صفحه عوض نمی شود. پس کاربر تمرکز می گیرد و سریع می بندد. اینجا با HTML، CSS و جاوااسکریپت ساده، مودال تصویر می سازیم.
ساخت مودال با CSS
مودال یک لایه رویی است. پس «position:fixed» و پس زمینه نیمه تاریک می خواهیم.
.modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n align-items: center;\n justify-content: center;\n}\n\n.modal.show {\n display: flex;\n}\n\n.modal-content {\n max-width: 90%;\n max-height: 90%;\n border-radius: 5px;\n}\n\n.close {\n position: absolute;\n top: 10px;\n right: 15px;\n font-size: 35px;\n color: #ffffff;\n cursor: pointer;\n}\nHTML گالری و قاب مودال
برای هر تصویر کوچک، یک مودال جدا یا یک مودال مشترک بساز.
<div class="gallery">\n <img src="img_5terre.jpg" alt="Cinque Terre" class="gallery-item" onclick="openModal('modal1', 'Cinque Terre')">\n <img src="img_forest.jpg" alt="Forest" class="gallery-item" onclick="openModal('modal2', 'Forest')">\n <img src="img_lights.jpg" alt="Northern Lights" class="gallery-item" onclick="openModal('modal3', 'Nothern Lights')">\n <img src="img_mountains.jpg" alt="Mountains" class="gallery-item" onclick="openModal('modal4', 'Mountains')">\n</div>\n\n<div id="modal1" class="modal">\n <span class="close" onclick="closeModal('modal1')">×</span>\n <img src="img_5terre.jpg" alt="Cinque Terre" class="modal-content">\n <div class="caption"></div>\n</div>\nنمایش و بستن مودال با JS
جاوااسکریپت روی رویداد کلیک، کلاس «show» را اضافه یا حذف می کند.
function openModal(modalId, caption) {\n let modal = document.getElementById(modalId);\n modal.style.display = "flex";\n modal.classList.add("show");\n let message = modal.querySelector(".caption");\n message.innerText = caption;\n}\n\nfunction closeModal(modalId) {\n let modal = document.getElementById(modalId);\n modal.classList.remove("show");\n setTimeout(function () {\n modal.style.display = "none";\n modal.querySelector(".caption").innerText = "";\n }, 300);\n}\nمراحل عملی سریع
- \n
- CSS مودال را بنویس و پنهانش کن. \n
- HTML گالری و قاب مودال بساز. \n
- تابع های open و close را اضافه کن. \n
- روی تصویر کلیک کن و تست بگیر. \n
- با Media Query واکنش گرا کن. \n
نکته: همیشه برای تصویر بزرگ شده، متن جایگزین مناسب بگذار.
جمع بندی سریع
- \n
- مودال تصویر تمرکز کاربر را حفظ می کند. \n
- CSS پنهان می کند؛ JS نمایش می دهد. \n
- پس زمینه تار، محتوا را برجسته می کند. \n
- دکمه بستن حتماً قابل دسترس باشد. \n
- اندازه تصویر را به 90٪ محدود کن. \n
مودال تصویر و استایل دهی تصاویر را کنار هم ببین تا هماهنگ شوند.