طراحی چند مدال بدون تکرار کد در جاوا اسکریپت
سلام وقتتون بخیر
من میخوام چند مدال طراحی کنم بدون تکرار کد اضافی
این کد من هست :
<div id="modal" class="w-full h-full hidden justify-center items-center bg-slate-500/30 fixed top-0 right-0 z-50">
<div class="modalContent p-5 myContainer rounded-lg bg-gray-100 text-gray-900 dark:bg-slate-900 animate-show2">
<button id="closeBtn" class="text-gray-800 hover:text-gray-900 duration-300 dark:hover:text-white text-2xl"><i class="fa fa-close"></i></button>
<h3 class="text-center text-3xl text-gray-800/50 dark:text-gray-100/50 font-bold">راهنما</h3>
<ul class="list-disc mr-7">
<!-- Content -->
</ul>
</div>
<div class="focus:ring-3 ring-gray-800"></div>
</div>من بخوام چند تا مدال طراحی کنم باید به چند تا المنت دسترسی پیدا کنم برای همه شون event کلیک بنویسم و اون رو ظاهر کنم
راهی هست مثل مدال بوتسترپ بتونم به صورت داینامیک مدال طراحی کنم و کد اضافه ننویسم
ممنون میشم راهنماییم کنید
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام وقت بخیر
من سناریوش رو براتون توضیح میدم
اگر قراره سمت html مثل بوت استرپ هندل بشه به این شکل میتونه باشه که ابتدا یک آیدی به اون المانی که قرار بعد از کلیک روی صفحه باز بشه میدیم
<style>
.modal{
position: fixed;
width: 100%;
height: 100%;
top:0; right: 0;
display: none;
}
</style>
<div class="modal" id="login">
<p>some content</p>
</div>بعد باید به اون المانی که قراره این باکس رو روی صفحه ظاهر کنه یک مقداری بدیم که بفهمیم این دکمه قراره این باکس رو باز کنه از اتریبویت های data استفاده میکنیم و همون مقدار آیدی باکس قبلی رو بهش میدیم به این شکل :
<button data-target="login">ثبت نام</button>حالا سمت جاوا اکسریپت هم میگیم هرجا روی data-target کلیک شد مقدارش رو بگیر و داخل صفحه دنبال id با اون مقدار بگرد و بهش یک کلاس مثل open اضافه کن
<script>
let buttons = document.querySelectorAll("[data-target]");
buttons.forEach(button => {
button.addEventListener("click", open_modal)
})
function open_modal() {
let target = this.dataset.target
let box = document.getElementById(target)
box ? box.classList.toggle('open') : null
}
</script>حالا فقط نیازه بسته به استایل هاتون بگید که مدال و کلاس open به چه شکلی باشن
