نمایش فرم Modal در Bootstrap 4

نمایش فرم Modal در Bootstrap 4

نحوه نمایش فرم Modal در بوت استرپ 4 کمی با نسخه 3 تفاوت داره. در واقع در نسخه بوت استرپ 3 برای نمایش فرم مودال از جاوا اسکریپت هم باید استفاده می شد اما در نسخه 4 استفاده مستقیم از جاوا اسکریپت صورت نمیگیره. 

یک پروژه خالی از نوع Core 3 یا Core 5 ایجاد کنید. در این نسخه ها از Core به طور پیش فرض از بوت استرپ نسخه 4 به بعد استفاده میشه. خب حالا در کنترلر Home و در اکشن Index کدهای زیر رو کپی و پیست کنید:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

پروژه رو اجرا کنید و روی دکمه Open Modal کلیک کنید. می بینید که یک فرم به صورت Modal نمایش داده میشه

نمایش مودال به صورت انیمیشن

می تونید با افرودن کلاس fade به div به راحتی نمایش فرم مودال خودتون رو با یک انیمیشن همراه کنید.

<!-- The Modal -->
<div class="modal fade" id="myModal">
   ...
</div>

تغییر اندازه فرم Modal در بوت استرپ 4

شما میتونید با استفاده از کلاس های modal-sm و modal-lg اندازه فرم مودال خودتون رو هم تعیین کنید. البته برای استفاده از این کلاسها باید از کلاس modal-dialog هم استفاده کنید.

<!-- The Modal -->
<div class="modal fade modal-dialog modal-lg" id="myModal">
   ...
</div>