弹出窗口

弹出是一个弹出窗口，包含任何 HTML 内容，它会在 App 的主内容上方弹出。弹出与其他所有覆盖物一样，是所谓的“临时视图”的一部分。

弹窗布局相当简单：

<body>
  ...
  <div class="popup">
    Any HTML content goes here
  </div>
</body>

默认情况下，弹窗在手机和平板（iPad）上的大小略有不同。在手机上它是全屏的，而在平板上它是630px宽度和高度。如果你想在平板上使其全屏，你应该向所需的弹窗添加额外的 "popup-tablet-fullscreen" 类：

<body>
  ...
  <!-- This popup has fullscreen size on tablets -->
  <div class="popup popup-tablet-fullscreen">
    Any HTML content goes here
  </div>
</body>

让我们看看与弹窗相关的 App 方法：

app.popup.create(参数)- 创建弹窗实例

  • 参数 - 对象. 带有弹窗参数的对象

方法返回创建的弹窗实例

app.popup.destroy(el)- 销毁弹窗实例

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

app.popup.get(el)- 通过 HTML 元素获取弹窗实例

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

方法返回弹窗实例

app.popup.open(el, animate)- 打开弹窗

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

方法返回弹窗实例

app.popup.close(el, animate)- 关闭弹窗

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

方法返回弹窗实例

现在让我们看看需要创建弹窗的可用参数列表：

参数类型默认描述
elHTMLElement弹窗元素。如果你已经在 HTML 中有弹窗元素，并想使用这个元素创建新的实例，这会很有用
内容字符串完整的弹窗 HTML 布局字符串。如果你想动态创建弹窗元素，这会很有用
背景遮罩布尔值true启用弹窗背景（暗色半透明层）
backdropElHTMLElement
字符串		自定义背景元素的HTML元素或字符串CSS选择器
backdropUnique布尔值如果启用，它将为该模态创建唯一的背景元素
closeByBackdropClick布尔值true当启用时，点击背景将关闭弹窗
closeOnEscape布尔值false当启用时，按下 ESC 键盘键将关闭弹出
animate布尔值true弹出是否应带动画打开/关闭。可以在.open()和.close()方法中覆盖。
swipeToClose布尔值
字符串		false弹出是否可以用滑动手势关闭。可以true允许用向上和向下的滑动关闭弹出，或者可以to-top(字符串) 仅允许向上滑动关闭弹出，或者to-bottom(字符串) 仅允许向下滑动关闭。
swipeHandlerHTMLElement
字符串		如果未传递，则整个弹出可以滑动关闭。您可以在此处传递自定义元素或字符串 CSS 选择器，该元素将用作滑动目标。（swipeToClosepush
push布尔值false当启用时，打开时将视图推到后面。仅在顶部安全区域存在时才有效。也可以通过向Sheet元素添加popup-push弹出元素的类。
containerElHTMLElement
字符串		模态挂载到的元素（默认为应用根元素）
on对象

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

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

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

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

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

<!-- Pass parameters as kebab-case data attributes -->
<div class="popup" data-close-on-escape="true" data-swipe-to-close="to-bottom">
  ...
</div>

所以要创建弹窗，我们必须调用：

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

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

属性
popup.app链接到全局应用实例
popup.el弹窗 HTML 元素
popup.$el包含弹窗 HTML 元素的 Dom7 实例
popup.backdropEl背景层 HTML 元素
popup.$backdropEl包含背景层 HTML 元素的 Dom7 实例
popup.params弹窗参数
popup.opened指示弹窗是否打开的布尔属性
方法
popup.open(animate)打开弹窗。其中
  • animate - 布尔值(默认true) - 定义是否应使用动画打开
popup.close(animate)关闭弹窗。其中
  • animate - 布尔值(默认true) - 定义是否应使用动画关闭
popup.destroy()销毁弹窗
popup.on(事件上触发, 处理程序)添加事件处理程序
popup.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
popup.off(事件上触发, 处理程序)移除事件处理程序
popup.off(事件上触发)移除指定事件的所有处理程序
popup.emit(事件上触发, ...args)在实例上触发事件

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

  • 要打开弹窗，我们需要添加 "popup-open" 类

  • 要关闭弹窗，我们需要添加 "popup-close" 类

  • 如果你在 DOM 中有多个弹窗，你需要通过额外的data-popup=".my-popup"属性在这个 HTML 元素上指定适当的 Sheet

根据上述说明：

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

<!-- And somewhere in DOM -->
<div class="popup my-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Popup</div>
          <div class="right">
            <!-- Link to close popup -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        ...
      </div>
    </div>
  </div>
  ...
</div>

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

DOM 事件

事件Target描述
popup:open弹窗元素<div class="popup">当弹出开始其打开动画时将触发事件
popup:opened弹窗元素<div class="popup">当弹出完成其打开动画后触发事件
popup:close弹窗元素<div class="popup">当弹出开始其关闭动画时触发事件
popup:closed弹窗元素<div class="popup">当弹出完成其关闭动画后触发事件
popup:swipestart弹窗元素<div class="popup">在滑动关闭交互开始时触发事件（当用户刚刚开始拖动弹出）
popup:swipemove弹窗元素<div class="popup">在滑动关闭移动交互时触发事件
popup:swipeend弹窗元素<div class="popup">在滑动关闭释放时触发事件
swipeclose弹窗元素<div class="popup">当弹出用滑动关闭时触发事件
popup:beforedestroy弹窗元素<div class="popup">事件将在弹窗实例将被销毁之前触发

App 和弹窗实例事件

弹窗实例在自身实例和 app 实例上都会发出事件。App 实例事件具有相同名称，并以popup.

事件参数Target描述
open为前缀弹出弹出事件将在弹窗开始其打开动画时触发。作为参数，事件处理程序接收弹窗实例
popupOpen弹出app
opened弹出弹出事件将在弹窗完成其打开动画后触发。作为参数，事件处理程序接收弹窗实例
popupOpened弹出app
close弹出弹出事件将在弹窗开始其关闭动画时触发。作为参数，事件处理程序接收弹窗实例
popupClose弹出app
closed弹出弹出事件将在弹窗完成其关闭动画后触发。作为参数，事件处理程序接收弹窗实例
popupClosed弹出app
beforeDestroy弹出弹出事件将在弹窗实例将被销毁之前触发。作为参数，事件处理程序接收弹窗实例
popupBeforeDestroy弹出app
swipeStart弹出弹出在滑动关闭交互开始时触发事件（当用户刚刚开始拖动弹出）
popupSwipeStart弹出app
swipeMove弹出弹出在滑动关闭移动交互时触发事件
popupSwipeMove弹出app
swipeEnd弹出弹出在滑动关闭释放时触发事件
popupSwipeEnd弹出app
swipeClose弹出弹出当弹出用滑动关闭时触发事件
popupSwipeClose弹出app

CSS 变量

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

注意，注释掉的变量默认未指定，其值在这种情况下是它们回退到的值。

:root {
  --f7-popup-border-radius: 0px;
  --f7-popup-tablet-width: 630px;
  --f7-popup-tablet-height: 630px;
  --f7-popup-push-offset: var(--f7-safe-area-top);
  /*
  --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  */
}
.ios {
  --f7-popup-tablet-border-radius: 5px;
  --f7-popup-transition-duration: 400ms;
  --f7-popup-transition-timing-function: initial;
  --f7-popup-push-border-radius: 10px;
}
.md {
  --f7-popup-tablet-border-radius: 28px;
  --f7-popup-transition-duration: 600ms;
  --f7-popup-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
  --f7-popup-push-border-radius: 28px;
}

示例

popup.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Popup</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Popup is a modal window with any HTML content that pops up over App's main content. Popup as all other
          overlays is part of so called "Temporary Views".</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup">Open Popup</a>
        </p>
        <p>
          <a class="button button-fill" @click=${createPopup}>Create Dynamic Popup</a>
        </p>
      </div>
      <div class="block-title">Swipe To Close</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>Popup can be closed with swipe to top or bottom:</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-swipe">Swipe To Close</a>
        </p>
        <p>Or it can be closed with swipe on special swipe handler and, for example, only to bottom:</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-swipe-handler">With Swipe
            Handler</a>
        </p>
      </div>
      <div class="block-title">Push View</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>Popup can push view behind. By default it has effect only when "safe-area-inset-top" is more than zero (iOS
          fullscreen webapp or iOS cordova app)</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-push">Popup Push</a>
        </p>
      </div>
    </div>
    <div class="popup demo-popup">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Popup Title</div>
            <div class="right"><a class="link popup-close">Close</a></div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p>Here comes popup. You can put here anything, even independent view with its own navigation. Also not,
              that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is fullscreen.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
              neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
              viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
              tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
              nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis
              elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
            </p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
              pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
              tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
              vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
              convallis blandit dui sit amet, gravida adipiscing libero.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="popup demo-popup-push">
      <div class="view view-init">
        <div class="page page-with-navbar-large">
          <div class="navbar navbar-large navbar-transparent">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Push Popup</div>
              <div class="right"><a class="link popup-close">Close</a></div>
              <div class="title-large">
                <div class="title-large-text">Push Popup</div>
              </div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
                neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
                viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
                tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare
                consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed
                libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a
                faucibus lectus.</p>
              <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
                pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
                tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
                vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit
                in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
                convallis blandit dui sit amet, gravida adipiscing libero.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
                neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
                viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
                tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare
                consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed
                libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a
                faucibus lectus.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popup demo-popup-swipe">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Swipe To Close</div>
            <div class="right"><a class="link popup-close">Close</a></div>
          </div>
        </div>
        <div class="page-content">
          <div style="height: 100%" class="display-flex justify-content-center align-items-center">
            <p>Swipe me up or down</p>
          </div>
        </div>
      </div>
    </div>
    <div class="popup demo-popup-swipe-handler">
      <div class="page">
        <div class="swipe-handler"></div>
        <div class="page-content">
          <div class="block-title block-title-large">Hello!</div>
          <div class="block block-strong-ios block-outline-ios">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
              neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
              viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
              tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
              nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis
              elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
            </p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
              pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
              tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
              vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
              convallis blandit dui sit amet, gravida adipiscing libero.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum
              neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus,
              viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper
              tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat
              nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis
              elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
            </p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper
              pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel
              tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at
              vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in
              iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros,
              convallis blandit dui sit amet, gravida adipiscing libero.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let popup;
    let popupSwipe;
    let popupSwipeHandler;
    let popupPush;

    const createPopup = () => {
      // Create popup
      if (!popup) {
        popup = $f7.popup.create({
          content: /*html*/`
            <div class="popup">
              <div class="page">
                <div class="navbar">
                  <div class="navbar-bg"></div>
                  <div class="navbar-inner">
                    <div class="title">Dynamic Popup</div>
                    <div class="right"><a  class="link popup-close">Close</a></div>
                  </div>
                </div>
                <div class="page-content">
                  <div class="block">
                    <p>This popup was created dynamically</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
                  </div>
                </div>
              </div>
            </div>
          `
        });
      }
      // Open it
      popup.open();
    }

    $onMounted(() => {
      popupSwipe = $f7.popup.create({
        el: '.demo-popup-swipe',
        swipeToClose: true,
      });
      popupSwipeHandler = $f7.popup.create({
        el: '.demo-popup-swipe-handler',
        swipeToClose: 'to-bottom',
        swipeHandler: '.swipe-handler'
      });
      popupPush = $f7.popup.create({
        el: '.demo-popup-push',
        swipeToClose: true,
        push: true,
      });
    })

    $onBeforeUnmount(() => {
      // Destroy popup when page removed
      if (popup) popup.destroy();
      if (popupSwipe) popupSwipe.destroy();
      if (popupSwipeHandler) popupSwipeHandler.destroy();
      if (popupPush) popupPush.destroy();
    })

    return $render;
  }
</script>
改进此文档
在本页上