یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
Mohammad
3 سال پیش توسط Mohammad مطرح شد
2 پاسخ

طراحی چند مدال بدون تکرار کد در جاوا اسکریپت

سلام وقتتون بخیر
من میخوام چند مدال طراحی کنم بدون تکرار کد اضافی
این کد من هست :

<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 کلیک بنویسم و اون رو ظاهر کنم
راهی هست مثل مدال بوتسترپ بتونم به صورت داینامیک مدال طراحی کنم و کد اضافه ننویسم

ممنون میشم راهنماییم کنید


ثبت پرسش جدید
Pouria
تخصص : developer
@pouria.782 3 سال پیش آپدیت شد
2

سلام وقت بخیر
من سناریوش رو براتون توضیح میدم
اگر قراره سمت 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 به چه شکلی باشن


Mohammad
@Mohammad.Naderi85 3 سال پیش مطرح شد
0

خیلی ممنون از راهنماییتون 🙏🙏🙏


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام