弹出框

Popover 组件用于管理弹出内容的表现形式。您使用弹出框来临时展示信息。弹出框会保持可见，直到用户点击弹出框窗口外部或您显式地关闭它。

注意不建议在小屏幕（iPhone）上使用弹出层。在小屏幕上，你应该使用Action Sheet代替。

弹出层布局

首先，让我们看看弹出层布局，它非常简单：

<body>
    ...
    <div class="popover">
        <!-- Popover's arrow -->
        <div class="popover-arrow"></div>

        <!-- Popover content -->
        <div class="popover-inner">
            <!-- Any HTML content here -->
        </div>
    </div>
</body>

弹出层是一个高度可定制的元素，你可以将其内部放置任何内容，甚至另一个带有导航的视图。

弹出层 App 方法

让我们看看与弹出层相关的方法：

app.popover.create(参数)- 创建弹出层实例

  • 参数 - 对象. 弹出层参数对象

该方法返回创建的弹出层实例

app.popover.destroy(el)- 销毁弹出层实例

  • el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的弹出层元素或弹出层实例。

app.popover.get(el)- 通过 HTML 元素获取弹出层实例

  • el - HTMLElement或字符串(使用 CSS 选择器)。弹出层元素。

该方法返回弹出层实例

app.popover.open(el, targetEl, animate)- 打开弹出层

  • el - HTMLElement或字符串(使用 CSS 选择器)。要围绕其打开的弹出层元素。
  • targetEl - HTMLElement或字符串(使用 CSS 选择器)。目标元素，用于设置弹出层位置。
  • animate - 布尔值. 带动画打开弹出层。

该方法返回弹出层实例

app.popover.close(el, animate)- 关闭弹出层

  • el - HTMLElement或字符串(使用 CSS 选择器)。要关闭的弹出层元素。
  • animate - 布尔值. 带动画关闭弹出层。

该方法返回弹出层实例

弹出层参数

现在让我们看看创建弹出层所需的可用参数列表：

参数类型默认描述
elHTMLElement弹出层元素。如果你已经在 HTML 中有弹出层元素，并想使用该元素创建新实例，则很有用。
箭头布尔值true启用弹出框箭头/角落
内容字符串完整的弹出层 HTML 布局字符串。如果你想动态创建弹出层元素，则很有用。
verticalPosition字符串自动强制弹出框垂直位置，可以是auto, top或bottom
背景遮罩布尔值true启用弹出层背景（屏幕后面的深色半透明层）
backdropUnique布尔值false如果启用，它将为该模态创建唯一的背景元素
backdropElHTMLElement
字符串		自定义背景元素的HTML元素或字符串CSS选择器
closeByBackdropClick布尔值true启用后，点击背景将关闭弹出层
closeByOutsideClick布尔值true启用后，点击弹出层外部将关闭弹出层
closeOnEscape布尔值false当启用时，按下 ESC 键盘键会关闭弹出框
animate布尔值true弹出层是否应带动画打开/关闭。可以在.open()和.close()方法中覆盖。
targetElHTMLElement
字符串		HTML 元素或目标元素的 CSS 选择器中覆盖。
targetX数字虚拟目标元素相对于屏幕左侧的水平偏移。在不使用实际目标元素时需要。targetEl)
targetY数字虚拟目标元素相对于屏幕顶部的垂直偏移。在不使用实际目标元素时需要。targetEl)
targetWidth数字0虚拟目标元素的宽度（以像素为单位）。在不使用实际目标元素时需要。targetEl)
targetHeight数字0虚拟目标元素的高度（以像素为单位）。在不使用实际目标元素时需要。targetEl)
containerElHTMLElement
字符串		模态挂载到的元素（默认为应用根元素）
on对象

带有事件处理程序的对象。例如：

var popover = app.popover.create({
  content: '<div class="popover">...</div>',
  on: {
    opened: function () {
      console.log('Popover opened')
    }
  }
})

注意，所有以下参数都可以在popover用于为所有弹出层设置默认值的属性。例如：

var app = new Framework7({
  popover: {
    closeByBackdropClick: false,
  }
});

如果你使用自动初始化的弹出层（例如，你通过app.popover.create创建它们），可以通过data-属性传递所有可用的 Sheet 参数。例如：

<!-- Pass parameters as kebab-case data attributes -->
<div class="popover" data-close-on-escape="true" data-backdrop="false">
  ...
</div>

弹出层方法和属性

因此，要创建弹出层，我们必须调用：

var popover = app.popover.create({ /* parameters */ })

之后我们就有其初始化的实例（如popover示例中上面的变量）以及有用的方法和属性：

属性
popover.app链接到全局应用实例
popover.el弹出层 HTML 元素
popover.$el包含弹出层 HTML 元素的 Dom7 实例
popover.backdropEl背景层 HTML 元素
popover.$backdropEl包含背景层 HTML 元素的 Dom7 实例
popover.targetEl弹出层目标 HTML 元素
popover.$targetEl包含弹出层目标 HTML 元素的 Dom7 实例
popover.params弹出层参数
popover.opened指示弹出层是否打开的布尔属性
方法
popover.open(targetEl, animate)围绕目标元素打开弹出层。其中
  • targetEl - HTMLElement 或字符串- 要围绕其设置弹出层位置的目标元素
  • animate - 布尔值(默认true) - 定义是否应使用动画打开
popover.open(animate)围绕在弹出层创建时传递的目标元素打开弹出层。其中
  • animate - 布尔值(默认true) - 定义是否应使用动画打开
popover.close(animate)关闭弹出层。其中
  • animate - 布尔值(默认true) - 定义是否应使用动画关闭
popover.destroy()销毁弹出层
popover.on(事件上触发, 处理程序)添加事件处理程序
popover.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
popover.off(事件上触发, 处理程序)移除事件处理程序
popover.off(事件上触发)移除指定事件的所有处理程序
popover.emit(事件上触发, ...args)在实例上触发事件

可以使用特殊类和数据属性在链接上打开和关闭所需的弹出层（如果你在 DOM 中有它们）：

  • 要打开弹出层，我们需要添加 "popover-open" 类

  • 要关闭弹出层，我们需要添加 "popover-close" 类

  • 如果你在 DOM 中有多个弹出层，你需要通过附加data-popover=".my-popover"属性在这个 HTML 元素上指定适当的 Sheet

根据上述说明：

<!-- In data-popover attribute we specify CSS selector of popover we need to open -->
<p><a href="#" data-popover=".my-popover" class="popover-open">Open Popover</a></p>

<!-- And somewhere in DOM -->
<div class="popover my-popover">
  <div class="popover-inner">
    <!-- Link to close popover -->
    <a class="link popover-close">Close Popover</a>
  </div>
</div>

弹出事件

弹出层将在弹出层元素和 app 及弹出层实例上触发以下 DOM 事件：

DOM 事件

事件Target描述
popover:open弹出层元素<div class="popover">当弹出框开始打开动画时将触发事件
popover:opened弹出层元素<div class="popover">当弹出框完成打开动画后触发事件
popover:close弹出层元素<div class="popover">当弹出框开始关闭动画时触发事件
popover:closed弹出层元素<div class="popover">当弹出框完成关闭动画后触发事件

app 和弹出层实例事件

弹出层实例在自身实例和 app 实例上都会发出事件。App 实例事件名称以popover.

事件参数Target描述
open为前缀弹出弹出为前缀。事件将在弹出层开始打开动画时触发。作为参数，事件处理程序接收弹出层实例
popoverOpen弹出app
opened弹出弹出事件将在弹出层完成打开动画后触发。作为参数，事件处理程序接收弹出层实例
popoverOpened弹出app
close弹出弹出事件将在弹出层开始关闭动画时触发。作为参数，事件处理程序接收弹出层实例
popoverClose弹出app
closed弹出弹出事件将在弹出层完成关闭动画后触发。作为参数，事件处理程序接收弹出层实例
popoverClosed弹出app
beforeDestroy弹出弹出事件将在弹出层实例将被销毁之前触发。作为参数，事件处理程序接收弹出层实例
popoverBeforeDestroy弹出app

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

:root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-border-radius: 13px;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-transition-timing-function: initial;
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-popover-border-radius: 28px;
  --f7-popover-actions-icon-size: 24px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-popover-bg-color: var(--f7-md-surface-3);
  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
}

示例

popover.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Popover</div>
      <div class="right">
        <a class="link popover-open" data-popover=".popover-menu">Popover</a>
      </div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="" class="link popover-open" data-popover=".popover-menu">Dummy Link</a>
      <a href="" class="link popover-open" data-popover=".popover-menu">Open Popover</a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a data-popover=".popover-menu" class="button button-fill popover-open">Open popover on me</a></p>
      <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta
        turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec
        malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate
        egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras
        suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a class="popover-open"
          data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
        vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
      <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta
        magna magna lacinia nunc. Curabitur <a class="popover-open" data-popover=".popover-menu">popover!</a> cursus
        laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat.
        Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis
        mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque
        elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
      <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus
        tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum
        arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis
        semper ligula. Morbi ullamcorper <a class="popover-open" data-popover=".popover-menu">one more popover</a> massa
        at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi.
        Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida
        eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse
        viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
    </div>
  </div>
  <div class="popover popover-menu">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list">
        <ul>
          <li><a href="/dialog/" class="list-button popover-close">Dialog</a></li>
          <li><a href="/tabs/" class="list-button popover-close">Tabs</a></li>
          <li><a href="/panel/" class="list-button popover-close">Side Panels</a></li>
          <li><a href="/list/" class="list-button popover-close">List View</a></li>
          <li><a href="/inputs/" class="list-button popover-close">Form Inputs</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
改进此文档
在本页上