مودال
مودال خالی

کامپوننت "مودال خالی" به شما امکان می‌دهد تا یک مودال ساده و سفارشی را ایجاد کنید که می‌تواند برای نمایش انواع مختلف محتوا یا پیام‌ها به کاربران شما استفاده شود. این نوع ماژول به عنوان پایه برای ایجاد تجربیات ماژول سفارشی کاربرد دارد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#basic-modal-preview" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="basic-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    p-10 text-center"
HTMLCloseTagاین ماژول خالی کاملاً شگفت‌انگیز است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

مؤلفه "مودال خالی" نقطه شروعی را برای ایجاد مدال با محتوا و استایل خود به شما ارائه می دهد و آن را به ابزاری همه کاره برای افزایش تعاملات کاربر در برنامه وب شما تبدیل می کند.

سایز مودال

کامپوننت "سایز مودال" به شما اجازه می‌دهد تا مودال‌هایی را ایجاد کنید که می‌توانند انواع مختلفی از محتوا یا الزامات طراحی خاص را جای دهند. شما می‌توانید از چهار اندازه مودال مختلف استفاده کنید: کوچک، متوسط، بزرگ و بسیار بزرگ، تضمین کننده انعطاف‌پذیری در نمایش محتوای شما.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Small Modal Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#small-modal-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow کوچک مودالHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: کوچک مودال Toggle --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: متوسط مودال Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#medium-modal-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow متوسط مودالHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: متوسط مودال Toggle --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: بزرگ مودال Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#large-modal-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow بزرگ مودالHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: بزرگ مودال Toggle --HTMLCloseTag
                                                    HTMLOpenTag!-- BEGIN: Super بزرگ مودال Toggle --HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#superlarge-modal-size-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagShow Superlarge مودالHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTag!-- END: Super بزرگ مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: Small Modal Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="small-modal-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600  sm:w-[300px]   p-10 text-center"
HTMLCloseTagاین ماژول کوچک کاملاً شگفت‌انگیز است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: کوچک مودال Content --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: متوسط مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="medium-modal-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    p-10 text-center"
HTMLCloseTagاین ماژول متوسط کاملاً شگفت‌انگیز است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: متوسط مودال Content --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: بزرگ مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="large-modal-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600   sm:w-[600px]  p-10 text-center"
HTMLCloseTagاین ماژول بزرگ کاملاً شگفت‌انگیز است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: بزرگ مودال Content --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: Super بزرگ مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="superlarge-modal-size-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600    sm:w-[600px] lg:w-[900px] p-10 text-center"
HTMLCloseTagاین کاملاً مدال فوق العاده بزرگ است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: Super بزرگ مودال Content --HTMLCloseTag
            
        

کامپوننت "سایز مودال" به شما امکان می‌دهد که طراحی سازگار و جذاب از نظر بصری را حفظ کنید، در حالی که انواع مختلف محتوا را پذیرفته و اطمینان حاصل کنید که یک تجربه کاربری بی‌درز را فراهم می‌کند. با آزمایش اندازه‌های مختلف، می‌توانید اندازه‌ای را پیدا کنید که بهترین تطابق با اهداف طراحی شما را داشته باشد و تجربه کاربری بهینه را ارائه دهید.

اخطار مودال

اجزای "اخطار مودال" یک روش کاربرپسند برای نمایش هشدارها، خطاها یا پیام‌های مهم به کاربران شما فراهم می‌کند. این ویژگی‌ها با طراحی جذاب اطمینان می‌دهد که اطلاعات به‌طور موثر منتقل می‌شود.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#warning-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="warning-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="x-circle"
    class="stroke-[1] w-5 h-5 mx-auto mt-3 h-16 w-16 text-warning mx-auto mt-3 h-16 w-16 text-warning"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagاوه...HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                                مشکلی پیش آمد!
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
                                                            class="border-t border-slate-200/60 p-5 text-center dark:border-darkmode-400"HTMLCloseTag
                                                            HTMLOpenTaga
                                                                class="text-primary"
                                                                href=""
                                                            HTMLCloseTag
                                                                چرا این مشکل را دارم؟
                                                            HTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

اجزای "اخطار مودال" اطمینان می‌دهد که هشدارهای مهم به طور روشن و جذاب ارائه شوند و کاربران را به سرعت آنها را درک کنند و اقدامات مناسب را انجام دهند. شما می‌توانید آن را برای سفارشی کردن با توجه به نیازهای خاص خود و طراحی برنامه‌ی خود، تنظیم کنید.

مودال با دکمه بستن

اجزای "مودال با دکمه بستن" یک روش ساده و کاربرپسند برای نمایش محتوا در یک دیالوگ مدال فراهم می‌کند که به کاربران امکان بستن آسان مدال را می‌دهد. این نوع مدال مناسب برای نمایش پیام‌ها، هشدارها یا اطلاعات اضافی و مفید است بدون نیاز به تعاملات پیچیده.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#button-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="button-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTaga
                                                            class="absolute rtl:left-0 ltr:right-0 top-0 rtl:ml-3 ltr:mr-3 mt-3"
                                                            data-tw-dismiss="modal"
                                                            href="#"
                                                        HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="x"
    class="stroke-[1] w-5 h-5 h-8 w-8 text-slate-400 h-8 w-8 text-slate-400"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                        HTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="check-circle"
    class="stroke-[1] w-5 h-5 mx-auto mt-3 h-16 w-16 text-success mx-auto mt-3 h-16 w-16 text-success"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagمودال ExampleHTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                                مودال with close button
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

The "مودال با دکمه بستن" component simplifies the در حالی که اطمینان می‌یابد که کاربران می‌توانند به راحتی آن را بسته کنند وقتی که ضروری است. آن را به منظور تطبیق با سبک و نیازهای محتوای برنامه خود سفارشی کنید. ضروری است. آن را برای تطبیق با سبک و نیازهای محتوای برنامه خود سفارشی کنید.

مودال با پس زمینه ایستا

The "مودال با پس زمینه ایستا" is a user-friendly way to اطمینان از اینکه پیام‌های مهم شما متوجه شوند. برخلاف پنجره‌های منبع باز منظم، این یک ویژگی‌های اضافه نخواهد شد هنگامی که برون از آن کلیک کنید یا کلید فرار را فشار دهید. برای موقعیت‌هایی که می‌خواهید کاربران خود را کاملاً توجه دهند، مانند به اشتراک گذاری به‌روزرسانی‌های مهم یا راهنمایی them through steps. With the "مودال با پس زمینه ایستا," پیام شما تا زمانی که acknowledged.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTagbutton
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#static-backdrop-modal-preview" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/buttonHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop="static"
    aria-hidden="true"
    tabindex="-1"
    id="static-backdrop-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    px-5 py-10"
HTMLCloseTagHTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="mb-5"HTMLCloseTag
                                                                اگر برون از من کلیک کنید، من بسته نخواهم شد. حتی امتحان نکنید
                                                                کلید فرار را فشار دهید.
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

Now, you're all set to use the "مودال با پس زمینه ایستا" مدال زمینه استاتیک را دارید و اطمینان حاصل کنید که پیام‌های شما دیده و تایید شده‌اند به راحتی.

مودال همپوشان

The "مودال همپوشان" is a nifty feature that allows نمایش مدال‌های چندگانه بر روی یکدیگر را فراهم می‌کند. این روش عالی برای ارائه اطلاعات به تدریج بدون بارگذاری کاربران خود با محتوای زیاد در یک بار این ویژگی به شما امکان می‌دهد که تجارب هدایت شده یا فرآیندهای مرحله به مرحله را به صورت یکپارچه ایجاد کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#overlapping-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="overlapping-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    px-5 py-10"
HTMLCloseTagHTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                            HTMLOpenTagdiv class="mb-5"HTMLCloseTag
                                                                برای نمایش مدال همپوشانی دکمه زیر را کلیک کنید!
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTag!-- BEGIN: مودال همپوشان Toggle --HTMLCloseTag
                                                            HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#next-overlapping-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودال همپوشانHTMLOpenTag/aHTMLCloseTag
                                                            HTMLOpenTag!-- END: مودال همپوشان Toggle --HTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag!-- BEGIN: مودال همپوشان Content --HTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="next-overlapping-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    p-5 text-center"
HTMLCloseTagاین مدال همپوشانی کاملاً شگفت‌انگیز است!HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag!-- END: مودال همپوشان Content --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

Now you have the power of the "مودال همپوشان" at نوک انگشتان خود دارید. از آن برای ایجاد تجارب کاربری محبوب و تجارب اطلاعاتی استفاده کنید که کاربران خود را از طریق برنامه خود به سرعت هدایت می‌کند. این ویژگی اطمینان می‌دهد که محتوای شما سازمان‌دهی و قابل دسترسی باقی می‌ماند، که این امر آسان‌تر برای کاربران است تا اطلاعات را در pace.

مودال داری سربرگ و پاورقی

The "مودال داری سربرگ و پاورقی" component offers a flexible فوترهای متمایز ارائه می‌دهد. این بخش‌ها برای اضافه کردن عناوین، اقدامات و اطلاعات اضافی به دیالوگ‌های مدال شما مناسب هستند. مدال‌های خود را با اضافه کردن عناوین، اقدامات و

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#header-footer-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="header-footer-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv
    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
                                                                پیام پخش
                                                            HTMLOpenTag/h2HTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 hidden sm:flex hidden sm:flex"
HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="file"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                                دانلود اسنادHTMLOpenTag/buttonHTMLCloseTag
                                                            HTMLOpenTagdiv
    data-tw-merge
    data-tw-placement="bottom-start"
    class="dropdown relative sm:hidden"
HTMLCloseTagHTMLOpenTagbutton
        data-tw-toggle="dropdown"
        aria-expanded="false"
        class="cursor-pointer block h-5 w-5"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="more-horizontal"
    class="stroke-[1] w-5 h-5 h-5 w-5 text-slate-500 h-5 w-5 text-slate-500"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
        HTMLOpenTag/buttonHTMLCloseTag
                                                                HTMLOpenTagdiv
        data-transition
        data-selector=".show"
        data-enter="transition-all ease-linear duration-150"
        data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
        data-enter-to="!mt-1 visible opacity-100 translate-y-0"
        data-leave="transition-all ease-linear duration-150"
        data-leave-from="!mt-1 visible opacity-100 translate-y-0"
        data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
        class="dropdown-menu absolute z-[9999] hidden"
    HTMLCloseTagHTMLOpenTagdiv
        data-tw-merge
        class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
    HTMLCloseTag
        HTMLOpenTaga
        class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
    HTMLCloseTagHTMLOpenTagi
    data-tw-merge
    data-lucide="file"
    class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                                        دانلود اسنادHTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    data-tw-merge
    class="p-5 grid grid-cols-12 gap-4 gap-y-3"
HTMLCloseTagHTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    از
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    تا
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-2" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    Subject
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-3" type="text" placeholder="Important Meeting" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    کلمات را دارد
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-4" type="text" placeholder="Job, Work, سندation" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    ندارد
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTaginput
    data-tw-merge
    id="modal-form-5" type="text" placeholder="Job, Work, سندation" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
HTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
                                                                HTMLOpenTaglabel
    data-tw-merge
    for="modal-form-6" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
    اندازه
HTMLOpenTag/labelHTMLCloseTag
                                                                HTMLOpenTagselect
    data-tw-merge
    id="modal-form-6" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 rtl:pl-8 ltr:pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag
                                                                    HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag
                                                                    HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag
                                                                    HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                            HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    class="px-5 py-3 rtl:text-left ltr:text-right border-t border-slate-200/60 dark:border-darkmode-400"
HTMLCloseTagHTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 rtl:ml-1 ltr:mr-1 w-20 rtl:ml-1 ltr:mr-1 w-20"
HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-20 w-20"
HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

اضافه کردن اطلاعات اضافی به دیالوگ‌های مدال شما می‌تواند ارتباط موثرتر با کاربران شما را فراهم آورد و فیلدهای فرم مرتبط را برای جذب کاربرانتان به‌طور موثر فراهم می‌کند.

حذف مودال

اجزای "حذف مودال" ابزار مهمی برای نمایش پیامدهای غیرقابل برگشتی مانند حذف سوابق یا داده‌ها هستند. این مدال به کاربران کمک می‌کند تا قبل از ادامه عملیات، تصمیم متأنی‌ای بگیرند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#delete-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="delete-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="x-circle"
    class="stroke-[1] w-5 h-5 mx-auto mt-3 h-16 w-16 text-danger mx-auto mt-3 h-16 w-16 text-danger"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagآیا مطمئن هستید؟HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                                آیا واقعاً می‌خواهید این سوابق را حذف کنید؟ HTMLOpenTagbrHTMLCloseTag
                                                                این فرآیند قابل بازگشت نیست.
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 rtl:ml-1 ltr:mr-1 w-24 rtl:ml-1 ltr:mr-1 w-24"
HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-danger border-danger text-white dark:border-danger w-24 w-24"
HTMLCloseTagحذفHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

اجزای "حذف مودال" به عنوان یک حائز اهمیت عمل می‌کند در برابر حذف‌های تصادفی و فرصتی، و به کاربران فرصتی برای تأیید اندیشه‌های خود قبل از ادامه دادن فراهم می‌کند. این کمک می‌کند تا از از دست دادن داده جلوگیری شود و در زمان برخورد با اقدامات حساس، ذهن آرامی را حفظ کند.

موفقیت مودال

اجزای "موفقیت مودال" یک ابزار ساده و موثر برای ارائه بازخورد مثبت به کاربران و تأیید اقدامات موفق داخل اپلیکیشن شما هستند. این مدال به کاربران احساس موفقیت را منتقل می‌کند و آنها را تأیید می‌کند که یک عمل یا اقدام موفق انجام داده‌اند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#success-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="success-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag
                                                            HTMLOpenTagi
    data-tw-merge
    data-lucide="check-circle"
    class="stroke-[1] w-5 h-5 mx-auto mt-3 h-16 w-16 text-success mx-auto mt-3 h-16 w-16 text-success"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-5 text-3xl"HTMLCloseTagکار خوبی انجام دادید!HTMLOpenTag/divHTMLCloseTag
                                                            HTMLOpenTagdiv class="mt-2 text-slate-500"HTMLCloseTag
                                                                شما دکمه را کلیک کردید!
                                                            HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag
                                                            HTMLOpenTagbutton
    data-tw-merge
    data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-24 w-24"
HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

اجزای "موفقیت مودال" با ارائه بازخورد روشن و انگیزشی، تجربه کاربری را بهبود می‌بخشد. این به کاربران کمک می‌کند تا احساس موفقیت و اعتماد به نفس در اقدامات خود داشته باشند و به طور کلی، تجربه کاربر را بهبود بخشند.

مودال با اسلایدر تاینی

اجزای "مودال با اسلایدر تاینی" از زیبایی دیالوگ‌های مدال همراه با عملکرد پویای یک اسلایدر کوچک به هم می‌آمیزد. این به شما امکان می‌دهد تصاویر یا محتوا را به صورت جذاب و تعاملی در یک مودال نمایش دهید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    data-tw-toggle="modal" data-tw-target="#tiny-slider-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="tiny-slider-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    p-5"
HTMLCloseTagHTMLOpenTagdiv class="mx-6"HTMLCloseTag
                                                            HTMLOpenTagdiv
    data-config="multiple-items"
    class="tiny-slider"
HTMLCloseTag
    HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                                    HTMLOpenTagdiv
                                                                        class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                                        HTMLOpenTagimg
                                                                            src="dist/images/products/product7-400x400.jpg"
                                                                            alt="تیل وایز - قالب داشبورد مدیریتی"
                                                                        HTMLCloseTag
                                                                    HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                                    HTMLOpenTagdiv
                                                                        class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                                        HTMLOpenTagimg
                                                                            src="dist/images/products/product5-400x400.jpg"
                                                                            alt="تیل وایز - قالب داشبورد مدیریتی"
                                                                        HTMLCloseTag
                                                                    HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                                    HTMLOpenTagdiv
                                                                        class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                                        HTMLOpenTagimg
                                                                            src="dist/images/products/product10-400x400.jpg"
                                                                            alt="تیل وایز - قالب داشبورد مدیریتی"
                                                                        HTMLCloseTag
                                                                    HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag
                                                                    HTMLOpenTagdiv
                                                                        class="image-fit h-full overflow-hidden rounded-md"HTMLCloseTag
                                                                        HTMLOpenTagimg
                                                                            src="dist/images/products/product1-400x400.jpg"
                                                                            alt="تیل وایز - قالب داشبورد مدیریتی"
                                                                        HTMLCloseTag
                                                                    HTMLOpenTag/divHTMLCloseTag
                                                                HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

مودال با اسلایدر تاینی یک انتخاب عالی برای نمایش تصاویر یا محتوا به صورت فشرده و تعاملی است. این ترکیب راحتی مدال‌ها با عملکرد جذاب اسلایدر را فراهم می‌کند و مناسب برای ارائه گالری محصولات، تصاویر یا هر نوع محتوایی که به صورت یک ارائه مناسب است.

نمایش و پنهان ساختن مودال با کدنویسی

ویژگی "نمایش و پنهان ساختن مودال با کدنویسی" شما را برای تعاملات پویا در داخل برنامه وب شما قدرتمند می‌کند. این امکان را فراهم می‌کند که به صورت برنامه‌نویسی، کنترل دیدن مدال‌ها را در برنامه‌ی شما داشته باشید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: نمایش مودال Toggle --HTMLCloseTag
                                                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                                    HTMLOpenTaga
    data-tw-merge
    id="programmatically-show-modal" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mb-2 rtl:ml-1 ltr:mr-1 mb-2 rtl:ml-1 ltr:mr-1"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: نمایش مودال Toggle --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
                                                HTMLOpenTagdiv
    data-tw-backdrop=""
    aria-hidden="true"
    tabindex="-1"
    id="programmatically-modal" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]    p-10 text-center"
HTMLCloseTagHTMLOpenTag!-- BEGIN: Hide مودال Toggle --HTMLCloseTag
                                                        HTMLOpenTaga
    data-tw-merge
    id="programmatically-hide-modal" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary rtl:ml-1 ltr:mr-1 rtl:ml-1 ltr:mr-1"
HTMLCloseTagHide مودالHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTag!-- END: Hide مودال Toggle --HTMLCloseTag
                                                        HTMLOpenTag!-- BEGIN: Toggle مودال Toggle --HTMLCloseTag
                                                        HTMLOpenTaga
    data-tw-merge
    id="programmatically-toggle-modal" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary rtl:ml-1 ltr:mr-1 rtl:ml-1 ltr:mr-1"
HTMLCloseTagToggle مودالHTMLOpenTag/aHTMLCloseTag
                                                        HTMLOpenTag!-- END: Toggle مودال Toggle --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
            
        

ویژگی "نمایش و پنهان ساختن مودال با کدنویسی" تعاملی برنامه‌ی وب شما را با ارائه کنترل دقیق بر روی نمایش مدال به شما کمک می‌کند. آیا نیاز دارید که مدال‌ها بر اساس اقدامات کاربر، پاسخ‌های دریافتی از تماس‌های API یا هر رویداد پویا فعال شوند؟ این قابلیت به شما اجازه می‌دهد تا تجربیات کاربری جذابی را که با نیازهای شما همخوانی دارد، ایجاد کنید.

رابط اجزاء

در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Dialog
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای مدال (پیش‌فرض "div").
`open` `boolean` آیا مدال باز است یا بسته است.
`onClose` `function` تابع فراخوانی شود هنگامی که مدال بسته است.
`staticBackdrop` `boolean` آیا مدال دارای پس‌زمینه استاتیک است (کلیک کردن برون) از آن بسته نخواهد کرد).
`size` `Size` اندازه مدال، یکی از "sm"، "md"، "lg" یا "xl" (پیش‌فرض "md" است).
Dialog.Panel
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای پنل دیالوگ (پیش‌فرض "div").
Dialog.Title
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای عنوان دیالوگ (پیش‌فرض "div").
Dialog.Description
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای توضیحات دیالوگ (پیش‌فرض به "div" است).
Dialog.Footer
پراپ (Prop) نوع (Type) شرح
`as` `string` نوع عنصر HTML برای پاورقی دیالوگ (پیش‌فرض "div").