این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • مودال
پیش فرض

برای نمایشِ پنجره‌های تعاملی و اعلان‌ها به کاربران وبسایت خود، از کامپوننت مودال استفاده کنید.

<!-- modal:wrapper -->
<div x-data="{modalIsOpen: false}">
    <button type="button"
        class="flex items-center justify-center h-10 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5"
        x-on:click="modalIsOpen = true">
        <span class="font-semibold text-xs whitespace-nowrap">باز کردن مودال</span>
    </button>
    <!-- modal -->
    <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen"
        x-on:keydown.esc.window="modalIsOpen = false" x-on:click.self="modalIsOpen = false"
        class="fixed inset-0 flex items-end sm:items-center justify-center bg-white/5 dark:bg-black/5 backdrop-blur-md p-4 lg:p-8 pb-8 z-30">
        <!-- modal:dialog -->
        <div x-show="modalIsOpen"
            x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity"
            x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
            class="flex flex-col gap-4 max-w-lg rounded-xl bg-white dark:bg-black border border-zinc-200 dark:border-zinc-900 overflow-hidden">
            <!-- dialog:header -->
            <div class="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800 p-4">
                <h3 class="font-semibold text-sm tracking-wide text-black dark:text-white">
                    شرایط استفاده از خدمات
                </h3>
                <button type="button" class="text-black dark:text-white transition-colors hover:!text-red-500"
                    x-on:click="modalIsOpen = false">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
                        fill="none" stroke-width="1.4" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div><!-- end dialog:header -->
            <!-- dialog:content -->
            <div class="px-4 py-8">
                <div class="space-y-5">
                    <p class="font-semibold text-xs text-zinc-400">
                        با تشکر از انتخاب خدمات ما. لطفاً مقررات و شرایط زیر را برای استفاده از
                        خدمات ما با دقت مطالعه کنید:
                    </p>

                    <ul class="font-semibold text-xs text-cyan-500 space-y-2">
                        <li>
                            ۱. مشتریان باید به مواردی که در قرارداد خدمات تعیین شده است، پایبند
                            باشند.
                        </li>
                        <li>
                            ۲. مشتریان باید اطلاعات صحیح و کامل در زمان ثبت نام و درخواست خدمات
                            را ارائه
                            دهند.
                        </li>
                    </ul>
                </div>
            </div><!-- end dialog:content -->
            <!-- dialog:footer -->
            <div
                class="flex flex-col-reverse sm:flex-row sm:items-center md:justify-end justify-between gap-2 border-t border-zinc-200 dark:border-zinc-800 p-4">
                <button type="button"
                    class="flex items-center justify-center h-9 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white transition-all active:scale-95 px-5"
                    x-on:click="modalIsOpen = false">
                    <span class="font-semibold text-xs whitespace-nowrap">بستن</span>
                </button>
                <button type="button"
                    class="flex items-center justify-center h-9 bg-blue-500 border border-transparent rounded-lg text-white transition-all hover:bg-blue-600 active:scale-95 px-5"
                    x-on:click="modalIsOpen = false">
                    <span class="font-semibold text-xs whitespace-nowrap">پذیرش</span>
                </button>
            </div><!-- end dialog:footer -->
        </div><!-- end modal:dialog -->
    </div><!-- end modal -->
</div><!-- end modal:wrapper -->