مودال Modal

پنجره مودال، یک کادر است که به صورت کامل بر روی همه موضوعات باز میشود، اینکه درون مودال چه چیزی نمایش داده شود، کاملا به طراحی شما بستگی دارد. ما به صورت پیش فرض یک دیالوگ طراحی کردیم، هر چند از خصوص مودال در موضوعات دیگر نیز استفاده کرده ایم. در مدال از تگهای html استفاده شده است. این تگها فقط برای نمایش ظاهری است و به صورت پیش فرض نیست مخفی هستند، اگر شما میخواهید آن پنجره نمایش داده شود، بایستی کلاس show را به آن اضافه کنید. یا با استفاده از جاوا اسکریپت پیاده سازی شده، آنرا فراخوانی کنید.

مثال

    <div class="modal w-auto-i h-auto-i">
        <div class="modal-dialog w-auto-i">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button class="close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button class="secondary">Close</button>
                <button class="primary">Save changes</button>
            </div>
        </div>
    </div>
    

نمایش به صورت واقعی

پس زمینه تیره

برای اضافه کردن پس زمینه تیره کافیست کلاس darkback را به مجموعه کلاس های modal خود اضافه کنید.

    <div class="modal darkback" tabindex="-1" id="modal1_ltr" wn-type="modal">
        <div class="modal-dialog">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button class="close" close-parent></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button class="secondary" close-parent>Close</button>
                <button class="primary">Save changes</button>
            </div>
        </div>
    </div>
    

عدم بسته شدن با کلیک خارج از دیالوگ

اگر میخواهید با کلیک کردن خارج از دیالوگ عمل مخفی شدن صورت نگیرد، کافیست خصوصیت back-close="false" را به مودال خد اضافه کنید، مقدار پیش فرض true است.

    <div class="modal darkback" tabindex="-1" id="modal1_ltr" wn-type="modal" back-close="false">
        <div class="modal-dialog">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button class="close" close-parent></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button class="secondary" close-parent>Close</button>
                <button class="primary">Save changes</button>
            </div>
        </div>
    </div>

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

اگر میخواهید با کلیک بر روی یک دکمه مودال شما بسته شود، کافیست خصوصیت close-parent را به دکمه مد نظر اضافه کنید. سیستم به طور خودکار هر دکمه ای که این خصوصیت را داشته باشد، به عنوان دکمه بستن مودال در نظر میگیرد.

    <button class="close" close-parent></button>

فراخوانی اسکریپت قبل از مخفی کردن

اگر میخواهید، قبل از مخفی کردن مودال، عملیاتی را انجام دهید، میتوانید، آن عملیات را در خصوصیت onbeforehide معرفی کنید، اگر مقدار برگشتی true باشد، مودال مخفی میشود و اگر false باشد، مودال بسته نمیشود.

از این خصوصیت برای گرفتن تایید، بررسی فرم قبل از بستن و موارد این چنینی استفاده میشود.

اگر میخواهید تابع خود را به صورت جاوا اسکریپت نسبت دهید، به WN(id].beforehide = ()=>{} نسبت دهید.

    <div class="modal" tabindex="-1" id="modal1" onbeforehide="return ...">
    ...
    </div>

فراخوانی با جاوا اسکریپت

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

backClose
بستن یا عدم بستن با کلیک بر روی غیر از دیالوگ. مقدار به صورت true یا false باید باشد.

beforeHide
نسبت دادن یک تابع جهت بررسی قبل از مخفی کردن مودال. مقدار برگشتی true یا false جهت ادامه کار.

afterHide
نسبت دادن یک تابع جهت بررسی بعد از مخفی کردن مودال.

beforeShow
نسبت دادن یک تابع جهت بررسی قبل از نمایش مودال. مقدار برگشتی true یا false جهت ادامه کار.

afterShow
نسبت دادن یک تابع جهت بررسی بعد از نمایش مودال.

show
نمایش مودال. WN(id).wn.show()

hide
مخفی کردن مودال. WN(id].hide()

toggle
سوئیچ کردن بین نمایش و عدم نمایش مودال. WN(id].toggle()

درست است که در ظاهر با اضافه شدن کلاس show به مودال، عمل نمایش انجام میشود، ولی در پس زمینه توابع و دستورات جاوایی برای کنترل اجرا میگردد. حذف کلاس show از مدال، باعث میشود تغییرات کناری، برگشت داده نشود.

حالتهای نمایشی

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

موقعیت های نمایشی

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

modal-block-start
نمایش دیالوگ در بالای تصویر

modal-block-end
نمایش دیالوگ در پایین تصویر

modal-block-fill
نمایش دیالوگ شروع از بالا و پایان در پایین تصویر

modal-inline-start
نمایش دیالوگ به صورت افقی در ابتدای شروع جهت نمایش، راست در راست به چپ و چپ در چپ به راست

modal-inline-end
نمایش دیالوگ به صورت افقی در انتهای جهت نمایش، چپ در راست به چپ و راست در چپ به راست

modal-inline-fill
نمایش دیالوگ به صورت افقی شروع و پایان کناره های تصویر

    <div class="modal modal-block-start modal-inline-start" ...>...</div>
    <div class="modal modal-block-start" ...>...</div>
    <div class="modal modal-block-start modal-inline-end" ...>...</div>
    <div class="modal modal-inline-start" ...>...</div>
    <div class="modal " ...>...</div>
    <div class="modal modal-inline-end" ...>...</div>
    <div class="modal modal-block-end modal-inline-start" ...>...</div>
    <div class="modal modal-block-end" ...>...</div>
    <div class="modal modal-block-end modal-inline-end" ...>...</div>
    <div class="modal modal-block-fill" ...>...</div>
    <div class="modal modal-inline-fill" ...>...</div>
    <div class="modal modal-block-fill modal-inline-fill" ...>...</div>

مودال با طول بیش از تصویر

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

    <div class="modal modal-block-start" tabindex="-1" id="modal1">
        ...
    </div>
    

اگر محتوی دیالوگ زیاد است و نمیخواهید کل صفحه اسکرول بخورد و میخواهید محتوی دارای اسکرول شود، کلاس modal-limit را به قسمت بدنه اضافه کنید.

    <div class="modal" tabindex="-1" id="modal1">
        <div class="modal-dialog">
            ...
            <div class="modal-body modal-limit">
                ...
            </div>
            ...
        </div>
    </div>
    

اندازه های پیش فرض

سیستم بر اساس اندازه مرورگر یک عرض پیش فرض برای دیالوگ انتخاب میکند، شما میتوانید به صورت دستی، هر اندازه ای بدهید.

نمایش انیمشین

اگر تمایل دارید در هنگام نمایش یا مخفی کردن مودال، افکت نمایشی یا کلاسهایی خاص اضافه شود، از خصوصیتهای show-class و hide-class استفاده کنید.