چطور می توانیم یک مودال را ایجاد کنیم؟
مثال زیر نشان می دهد که چطور می توانیم یک مودال ابتدایی را ایجاد کنیم:
مثال
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
توضیح و تشریح مثال بالا
توضیح بخش Trigger:
برای راه اندازی پنجره ی مودال،باید از یک دکمه یا لینک استفاده کنید.
سپس باید دو خصوصیت از نوع *-data را به صورت زیر اضافه نمایید:
- برای باز کردن پنجره ی مودال : "data-toggle="modal
- برای اشاره کردن به آی دی مودال: "data-target="#myModal
توضیح بخش Modal
عنصر والد مودال، که یک <div> است، باید یک id داشته باشد که با id قرار گرفته در خصوصیت data-target برابر باشد.
کلاس modal. محتوای عنصر div ای که در آن تعریف شده است را تبدیل به یک مودال می کند و فوکس را به آن منتقل می کند.
کلاس fade. نیز یک افکت انتقال(transition) را به مودال اضافه می کند که باعث می شود مودال در هنگام باز و بسته شدن محو شود. بنابراین اگر که نمی خواهید افکت محو شدن به مودال مورد نظر اضافه شود، این کلاس را حذف کنید.
خصوصیت "role="dialog دسترسی کسانی که از صفحه خوان ها استفاده می کنند را بهبود می بخشد.
کلاس modal-dialog. عرض و margin مناسب را به مودال اختصاص می دهد.
توضیح بخش Modal content:
عنصر <div> که دارای "class="modal-content است، درواقع به مودال ما استایل می دهد و border و background-color و ... را تنظیم می کند. در درون عنصر <div> یاد شده، قسمت های header و body و footerr نیز وجود دارند.
از کلاس modal-header. برای تعریف استایل، برای قسمت header از مودال، استفاده می شود. همان طور که مشاهده می کنید، عنصر <button> که در درون header قرار دارد، دارای یک خصوصیت "data-dismiss="modal می باشد. این خصوصیت، باعث می شود که اگر بر روی این دکمه کلیک کنید،مودال بسته شود. و کلاس close. ، دکمه ی بستن را استایل دهی می کند و کلاس modal-title. با استفاده از یک line-hight مناسب، قسمت headerr را استایل دهی می کند.
از کلاس modal-body. برای تعریف یک استایل، برای قسمت بدنه ی مودال استفاده می شود. در آن قسمت می توانید هر نوع کد اچ تی ام ال را قرار دهید مانند: پاراگراف ها و عکس ها و ویدئوها و ... .
از کلاس modal-footer. برای تعریف یک استایل، برای قسمت footer از مودال استفاده می شود. توجه داشته باشید که این قسمت، به طور پیش فرض راست چین می باشد.
