با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. در اغلب وب سایت ها، وقتی به عنوان مثال روی یک Button کیلک می کنید. پیغامی در بخش بالایی وب سایت نمایش داده می شود. که در Bootstrap 4 ویژگی Modal اینکار را به راحتی انجام می دهد. همچنین می توانید Style و فونت متن پیغام را نیز تغییر دهید. برای آشنایی بیشتر و کار با ویژگی Modal در Bootstrap 4 یا قابلیت ماژول در بوت استرپ ۴ ، با ما در ادامه ی این آموزش، همراه باشید.
ویژگی Modal در Bootstrap 4 یک پیغام dialog box/popup را در قسمت بالای وب سایت، نمایش می دهد.
مثال زیر چگونگی ایجاد یک modal پایه را در Bootstrap 4 نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!-- Button to Open the Modal --> <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">×</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> |
با استفاده از کلاس .fade
می توانید یک افکت محو شدن را به اسلایدها اضافه کنید:
1 2 3 4 5 | <!-- Fading modal --> <div class="modal fade"></div> <!-- Modal without animation --> <div class="modal"></div> |
با افزودن کلاس .modal-sm
از modal های کوچک استفاده کنید. و از کلاس .modal-lg
نیز برای modal های بزرگ استفاده کنید. این کلاسها را به همراه کلاس .modal-dialog
به عنصر <div>
اضافه کنید:
مثال-اندازه کوچک:
1 | <div class="modal-dialog modal-sm"> |
مثال۲-اندازه بزرگ:
1 | <div class="modal-dialog modal-lg"> |
در حالت پیش فرض اندازه ی modal ها medium یا متوسط است.
با استفاده از کلاس .modal-dialog-centered
مرکز modal ر ابصورت عمودی یا افقی در مرکز صفحه وب تنظیم کنید:
1 | <div class="modal-dialog modal-dialog-centered"> |
پس از مرور مباحث این بخش شما می توانید، پیغام های dialog box/popup را با Style های دلخواه خود در قالب وب سایت، پیاده سازی کنید. و ارتباط قالب وب سایت خود را با کاربران قوی تر کنید. امیدواریم که از آموزش کار با ویژگی Modal در Bootstrap 4 بخوبی استفاده کرده باشید.
zabi
سلام
میخوام از داخل یک مودال ، مودال دیگه ای رو صدا بزنم به نحوی که مودال جدید که باز شد مودال قبلی بسته بشه!
مشکلم اینه که مودال جدید که باز میشه مودال قبلی بسته نمیشه
پی وی لرن
سلام
باید شما چک کنید که چه رویدادی در قسمت دکمه بستن مودال قبلی قرار دارد و آن را در دکمه مودال قرار دهید که با کلیک روی دکمه هم رویداد بستن مودال قبلی وجود داشته باشد هم رویداد باز کردن مودال جدید
یک نمونه برای بستن مودال قبلی
$('#modal').modal('hide');
zabi
ممنون که پاسخ دادید!!
دقیقا همین کاری که شما فرمودید انجام داده بودم ، مودال قبلی بسته میشه اما فوکوس به صفحه اصلی منتقل میشه و اسکرول بار صفحه اصلی فعال میشه به نحوی که اگه مرورگر رو کوچیک کنیم و لازم باشه برای دیدن کامل مودال جدید اسکرول کنیم صفحه اصلی جابجا میشه نه مودال !!
اگه خودتون امتحانش کنید متوجه میشید
zabi
مشکلم حل شد ،
چه جوری میتونم کد ها رو وارد کنم تا دیگران هم بتونن استفاده کنند ؟ تا حالا اینکار رو نکردم راهنمایی کنید لطفا
پی وی لرن
سلام
بسیار عالی ، شما می توانید از تگ کد (“< "code">” ) استفاده کنید اگر بازهم بهم ریختگی داشته باشد مشکلی ندارد دوستان اصلاح خواهند کرد .
بزودی انجمن پی وی لرن هم راه اندازی خواهد شد که می توانید در اونجا سوال هایتان را بپرسید و به راحتی کد ها را قرار دهید.
zabi
onclik="$('#modal_1').modal('hide');
$('#modal_1').on('hidden.bs.modal' ,
function(e){ $('#modal_2').modal('show')} )"
zabi
کد قبلی یه مشکل بزرگ داره ، اما کد زیر رو کامل تست کردم و مشکلی نداره
onclik="
$('#modal_1').modal('hide').hide(
function(){
$('#modal_2' ).modal('show')
})"
shahram
سلام علیکم
ببخشید بنده یه مشکل خاصی برام پیش اومده در مورد اجرای اولیه modal در گوشی ios
اینکه وقتی سایت خودم رو با مرورگر گوشی آیفون اجرا میکنم و وقتی در مرحله اول modal رو اجرا میکنم در حالت modal گیر میکنه و اسکرول کار میکنه و نه خارج میشه
shahram
در واقع نه اسکرول کار میکنه و نه خارج میشه
پی وی لرن
سلام
ممکنه مرورگر گوشی، مودال را به درستی پشتیبانی نمی کند، معمولا مرورگر خود گوشی سایت ها را به درستی اجرا نمی کند و از مرورگرهای کروم و فایرفاکس بایستی استفاده کرد برای این مشکل هم یک بار بر روی مرورگر سیستم بررسی کنید، مرورگر را باز و از طریق inspect element وارد سایز گوشی شده و مودال را کلیک کنید و در قسمت console چک کنید خطایی بر نمی گرداند.