赞助商成为赞助商

弹出窗口

弹出窗口是带有任意 HTML 内容的弹出窗口，该窗口会弹至应用程序主内容之上。弹出窗口与所有其他浮层一样，属于所谓的“临时视图”。

弹出窗口布局非常简单

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

默认情况下，Popup 在手机和平板电脑（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>

让我们看一看与 Popup 相关的 App 方法

app.popup.create(parameters) - 创建 Popup 实例

  • parameters - object。带有 popup 参数的对象

该方法返回创建的 Popup 的实例

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

  • el - HTMLElement或string(带 CSS 选择器)或object。要销毁的 Popup 元素或 Popup 实例。

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

  • el - HTMLElement或string(带 CSS 选择器)。Popup 元素。

该方法返回 Popup 的实例

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

  • el - HTMLElement或string(带 CSS 选择器)。要打开的 Popup 元素。
  • animate - boolean。使用动画打开 Popup。

该方法返回 Popup 的实例

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

  • el - HTMLElement或string(带 CSS 选择器)。要关闭的 Popup 元素。
  • animate - boolean。使用动画关闭 Popup。

该方法返回 Popup 的实例

现在让我们看一看创建 Popup 所需的可用参数列表

参数类型默认描述
elHTMLElementPopup 元素。如果你的 HTML 中已经有了 Popup 元素，并且想要使用此元素创建新实例，这会非常有用
contentstring完整的 Popup HTML 布局字符串。如果你想动态地创建 Popup 元素，这会非常有用
backdropbooleantrue启用 Popup 背景（后面的深半透明层）
backdropElHTMLElement
string		自定义背景元素的 HTML 元素或字符串 CSS 选择器
backdropUniqueboolean如果启用它为这个模态框创建唯一的背景元素
closeByBackdropClickbooleantrue启用后，点击背景将关闭弹出窗口
closeOnEscapebooleanfalse启用后，按下 ESC 键盘键将关闭弹出窗口
animatebooleantruePopup 是否应该使用动画打开/关闭。可以在 .open() 和 .close() 方法中覆盖它
swipeToCloseboolean
string		false弹出窗口是否可以使用滑动姿势关闭。可以为 true允许使用向上和向下的滑动操作关闭弹出窗口，或者为 to-top（字符串）以仅允许向上的滑动操作关闭弹出窗口，或者为 to-bottom（字符串）以仅允许向下的滑动操作关闭弹出窗口。
swipeHandlerHTMLElement
string		如未传递，则可以滑动整个弹出窗口以关闭它。可以在此传递将用作滑动目标的自定义元素的 HTML 元素或字符串 CSS 选择器。（swipeToClose 也必须启用）
pushbooleanfalse启用后，它会在打开时推移背后的视图。仅在顶级安全区域就位时有效。还可以通过向 Popup 元素添加 popup-push 类来启用它。
containerElHTMLElement
string		加载模式的元素（默认值为应用根元素）
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- 属性传递所有可用的弹出窗口参数。例如

<!-- 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.$elDom7 实例（带有弹出窗口的 HTML 元素）
popup.backdropEl背景 HTML 元素
popup.$backdropElDom7 实例（带有背景 HTML 元素）
popup.params弹出窗口参数
popup.opened表示弹出窗口是否已打开的布尔值属性
方法
popup.open(animate)打开弹出窗口。其中
  • animate - boolean（默认情况下为 true） - 定义是否应该使用动画将其打开
popup.close(animate)关闭弹出窗口。其中
  • animate - boolean（默认情况下为 true） - 定义是否应该使用动画将其关闭
popup.destroy()销毁弹出窗口
popup.on(event, handler)添加事件处理程序
popup.once(event, handler)添加将在触发后移除的事件处理程序
popup.off(event, handler)移除事件处理程序
popup.off(event)移除指定事件的所有处理程序
popup.emit(event, ...args)在实例中触发事件

可以通过链接上的特殊类和数据属性来打开和关闭所需的弹出窗口（如果你在 DOM 中有这些弹出窗口）

  • 要打开弹出窗口，我们需要向任何 HTML 元素（优先链接）添加 "popup-open" 类

  • 要关闭弹出窗口，我们需要向任何 HTML 元素（优先链接）添加 "popup-close" 类

  • 如果您在 DOM 中有多个弹出窗口，则需要通过此 HTML 元素上的其他 data-popup=".my-popup" 属性指定相应的弹出窗口

根据上述备注

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

弹出窗口将在弹出窗口元素以及在应用和弹出窗口实例上触发以下 DOM 事件

DOM 事件

事件目标元素描述
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">在轻扫关闭松开时将触发此事件
popup:swipeclose弹出窗口元素<div class="popup">通过轻扫关闭弹出窗口时将触发此事件
popup:beforedestroy弹出窗口元素<div class="popup">在销毁弹出窗口实例之前立即触发此事件

应用与弹出窗口实例事件

弹出窗口实例在自身的实例和应用实例上发出事件。应用实例事件具有相同名称，但前缀为 popup。

事件参数目标元素描述
openpopuppopup当弹出窗口开始其打开动画时将触发此事件。作为参数，事件处理程序接收弹出窗口实例
popupOpenpopupapp
openedpopuppopup在弹出窗口完成其打开动画后将触发此事件。作为参数，事件处理程序接收弹出窗口实例
popupOpenedpopupapp
closepopuppopup当弹出窗口开始其关闭动画时将触发此事件。作为参数，事件处理程序接收弹出窗口实例
popupClosepopupapp
closedpopuppopup在弹出窗口完成其关闭动画后将触发此事件。作为参数，事件处理程序接收弹出窗口实例
popupClosedpopupapp
beforeDestroypopuppopup在销毁弹出窗口实例之前立即触发此事件。作为参数，事件处理程序接收弹出窗口实例
popupBeforeDestroypopupapp
swipeStartpopuppopup在轻扫关闭交互开始时（当用户刚开始拖动弹出窗口时）将触发此事件
popupSwipeStartpopupapp
swipeMovepopuppopup在轻扫关闭移动交互中将触发此事件
popupSwipeMovepopupapp
swipeEndpopuppopup在轻扫关闭松开时将触发此事件
popupSwipeEndpopupapp
swipeClosepopuppopup通过轻扫关闭弹出窗口时将触发此事件
popupSwipeClosepopupapp

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>
改进此文档
在本页