弹出层(Modal)

一个经典的弹出层模态框,在里面你可以自由放置任何内容,它对移动用户友好的。

1

弹出层模态框结构非常简单:

  • modal:主容器
    • modal-background: 模态背景:一个透明的覆盖,可以作为一个点击目标关闭模态背景
    • 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修饰符。 您可能还想将is-clipped修饰符添加到包含元素(通常是html)中以阻止滚动溢出。

No JavaScript
Bulma不包含任何JavaScript交互。 您必须自己实现类切换功能。俺老刘已经给你写好js代码了,请到详情见《俺老刘bulma css快速入门教程》弹出层相关章节,该电子教程比官方文档更通俗易懂。

图片弹出层 #

因为模态可以包含您想要的任何内容,所以您可以非常简单地使用它来构建图像库,例如:

运行实例

<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>

如果你想要一个更经典的模态,有head, a body and a foot,使用模态卡。

<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>

变量 #

Name
Type
Value
Computed Value
Computed Type
$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
variable
$background
hsl(0, 0%, 96%)
color
$modal-card-head-border-bottom
size
1px solid $border
$modal-card-head-padding
size
20px
$modal-card-head-radius
variable
$radius-large
6px
size
$modal-card-title-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$modal-card-title-line-height
string
1
$modal-card-title-size
variable
$size-4
1.5rem
size
$modal-card-foot-radius
variable
$radius-large
6px
size
$modal-card-foot-border-top
size
1px solid $border
$modal-card-body-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$modal-card-body-padding
size
20px
$modal-breakpoint
variable
$tablet
769px
size

返回头部

23222

问题反馈
返回顶部
(function(){ var src = "https://s.ssl.qhres2.com/ssl/ab77b6ea7f3fbf79.js"; document.write('