پاسخ داده شد
فرض کنیم می خواهیم وقتی کاربر روی دکمه ای کلیک کرد یک پیغام بصورت popup در بالای صفحه نشان داده شود.اینکار در bootstrap چگونه انجام می شود؟
- فرشته حقیقی 2 سال قبل سوال کرد
- آخرین ویرایش 2 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ عالی
برای اینکار باید از کامپوننت modal بصورت زیر استفاده کنیم. modal یک باکس برای نمایش پیغام یا متن می باشد.این کامپوننت شامل 3 قسمت Header ، body و footer می باشد.
<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>
می توانیم اندازه باکس را با استفاده از کلاس های modal-sm و modal-lg و modal-xl زیر انتخاب کنیم .
.
.
.
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
.
.
.
درصورتیکه بخواهیم باکس در وسط صفحه باشد از کلاس modal-dialog-centered استفاده می کنیم.
.
.
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
.
.
درصورتیکه متن پیام طولانی باشد می توانیم از کلاس modal-dialog-scrollable برای ایجاد اسکرول در باکس استفاده کنیم.
.
.
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-scrollable">
.
.
- فرشته حقیقی 2 سال قبل پاسخ داد
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ شما