贊助商成為贊助商

彈出視窗

快顯視窗是一個快顯視窗，其中包含任何跳出應用程式主要內容的 HTML 內容。快顯視窗如同其他所有疊加層，都是所謂「暫時檢視」的一部分。

快顯視窗版面非常簡單

<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.popup.create(參數)- 建立快顯視窗實例

  • 參數 - 物件。具有快顯視窗參數的物件

方法傳回建立的快顯視窗實例

app.popup.destroy(el)- 銷毀快顯視窗實例

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）或 物件。要銷毀的快顯視窗元素或快顯視窗實例。

app.popup.get(el)- 透過 HTML 元素取得快顯視窗實例

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）。快顯視窗元素。

方法傳回快顯視窗實例

app.popup.open(el, 動畫)- 開啟快顯視窗

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）。要開啟的快顯視窗元素。
  • 動畫 - 布林值。以動畫開啟快顯視窗。

方法傳回快顯視窗實例

app.popup.close(el, 動畫)- 關閉快顯視窗

  • el - HTMLElement 或 字串（使用 CSS 選擇器）。要關閉的快顯視窗元素。
  • animate - 布林值。使用動畫關閉快顯視窗。

方法傳回快顯視窗實例

現在讓我們來看看建立快顯視窗時需要的可用參數清單

參數類型預設值說明
elHTMLElement快顯視窗元素。如果您在 HTML 中已有快顯視窗元素，並想使用此元素建立新執行個體時，這會很有用
content字串完整的快顯視窗 HTML 版面配置字串。如果您想動態建立快顯視窗元素時，這會很有用
backdrop布林值true啟用快顯視窗背景（後面的深色半透明圖層）
backdropElHTMLElement
字串		自訂背景元素的 HTML 元素或 CSS 選擇器字串
backdropUnique布林值如果啟用，它會為這個模式建立獨特的背景元素
closeByBackdropClick布林值true啟用時，點選背景會關閉快顯視窗
closeOnEscape布林值false啟用時，按下 ESC 鍵盤按鍵會關閉快顯視窗
animate布林值true快顯視窗是否應使用動畫開啟/關閉。可以在 .open() 和 .close() 方法中覆寫
swipeToClose布林值
字串		false快顯視窗是否可以使用滑動手勢關閉。可以是 true 以允許使用向上和向下的滑動關閉快顯視窗，或可以是 to-top（字串）以僅允許向上滑動關閉快顯視窗，或 to-bottom（字串）以僅允許向下滑動關閉快顯視窗。
swipeHandlerHTMLElement
字串		如果未傳遞，則可以滑動整個快顯視窗以關閉。您可以在這裡傳遞自訂元素的 HTML 元素或 CSS 選擇器字串，該元素將用作滑動目標。（swipeToClose 也必須啟用）
push布林值false啟用時，它會在開啟時推動後面的檢視。僅在頂部安全區域就位時才有效。也可以透過將 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- 屬性傳遞所有可用的快顯視窗參數。例如

<!-- 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(event, handler)新增事件處理常式
popup.once(event, handler)新增事件處理常式，該常式會在觸發後移除
popup.off(event, handler)移除事件處理常式
popup.off(event)移除指定事件的所有處理常式
popup.emit(event, ...args)在執行個體上觸發事件

可以使用連結上的特殊類別和資料屬性，開啟和關閉所需的快顯視窗（如果它們在 DOM 中）

  • 若要開啟快顯視窗，我們需要將「popup-open」類別新增至任何 HTML 元素（建議使用連結）

  • 若要關閉快顯視窗，我們需要將「popup-close」類別新增至任何 HTML 元素（建議使用連結）

  • 如果您在 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>
改善此文件
在此頁面上