Modal

یک modal کلاسیک، که در آن می توانید هر محتوایی را وارد کنید

رنگ ندارد
سایز ندارد
متغیر دارد

ساختار modal بسیار ساده است:

  • modal: بخش اصلی
    • modal-background: یک بخش شفاف که با کلیک روی آن modal بسته می شود.
    • modal-content: یک بخش به صورت افقی و عمودی،,که حداکثر اندازه آن 640px است که می توان هر محتوایی در آن قرار داد
    • modal-close


<div class="modal">
 <div class="modal-background"></div>
 <div class="modal-content">
  <!-- Any other Bulma elements you want -->
 </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>
                            

برای فعال کردن modal، فقط کلاس اصلاح کننده is-active را به بخش .modal اضافه کنید. همچنین می توانید کلاس اصلاح کننده is-clipped به المان (معمولا html) اضافه کنید تا scroll غیر فعال شود.

بدون JavaScript
Bulma شامل هیچ تعامل JavaScript نیست. شما باید کلاس خود را پیاده سازی کنید.

Image modal

از آنجا که یک modal می تواند ahlg هر چیزی باشد ، می توانید به راحتی از آن برای ساختن یک گالری تصویر استفاده کنید،به عنوان مثال :

Launch image modal


<div 
 class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
   <p class="image is-4by3">
    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
   </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>
                            

Modal card

اگر یک Modal کلاسیک تر , همراه با یک head، یک body و یک foot می خواهید، از modal-card استفاده کنید.


<div 
 class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
   <header class="modal-card-head">
    <p class="modal-card-title">Modal title</p>
    <button class="delete" aria-label="close"></button>
   </header>
  <section class="modal-card-body">
   <!-- Content ... -->
  </section>
  <footer class="modal-card-foot">
   <button class="button is-success">Save changes</button>
   <button class="button">Cancel</button>
  </footer>
 </div>
</div>
                                

متغیر ها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$modal-z string 40
$modal-background-background-color compound bulmaRgba($scheme-invert, 0.86)
$modal-content-width size 640px
$modal-content-margin-mobile size 20px
$modal-content-spacing-mobile size 160px
$modal-content-spacing-tablet size 40px
$modal-close-dimensions size 40px
$modal-close-right size 20px
$modal-close-top size 20px
$modal-card-spacing size 40px
$modal-card-head-background-color color $background hsl(0, 0%, 96%)
$modal-card-head-border-bottom size 1px solid $border
$modal-card-head-padding size 20px
$modal-card-head-radius size $radius-large 6px
$modal-card-title-color color $text-strong hsl(0, 0%, 21%)
$modal-card-title-line-height string 1
$modal-card-title-size size $size-4 1.5rem
$modal-card-foot-radius size $radius-large 6px
$modal-card-foot-border-top size 1px solid $border
$modal-card-body-background-color color $scheme-main hsl(0, 0%, 100%)
$modal-card-body-padding size 20px
$modal-breakpoint size $tablet 769px