فرض کنیم می خواهیم وقتی کاربر روی دکمه ای کلیک کرد یک پیغام بصورت popup در بالای صفحه نشان داده شود.اینکار در bootstrap چگونه انجام می شود؟
- فرشته حقیقی 5 سال قبل سوال کرد
- آخرین ویرایش 5 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید
برای اینکار باید از کامپوننت 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">
.
.
- فرشته حقیقی 5 سال قبل پاسخ داد
- شما باید برای ارسال دیدگاه وارد شوید