EN

Search
Close this search box.

موستانگ، وحشیِ دوست داشتنی

پاسخ داده شد
0
0

فرض کنیم می خواهیم  وقتی کاربر روی دکمه ای کلیک کرد یک پیغام بصورت popup در بالای صفحه نشان داده شود.اینکار در bootstrap چگونه انجام می شود؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

برای اینکار باید از  کامپوننت 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">&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>

می توانیم اندازه باکس را با استفاده از کلاس های 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">
.
.
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت