贊助者成為贊助者

彈出視窗

彈出視窗元件用於管理彈出視窗中內容的呈現。您可以使用彈出視窗暫時呈現資訊。彈出視窗會保持可見，直到使用者輕觸彈出視窗視窗外側，或您明確關閉它為止。

請注意，不建議在小螢幕 (iPhone) 上使用彈出視窗。在小螢幕上，您應該改用 動作表單。

彈出視窗配置

首先，讓我們看看彈出視窗配置，它非常簡單

<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.popover.create(parameters)- 建立彈出視窗執行個體

  • parameters - object。具有彈出視窗參數的物件

方法傳回已建立的彈出視窗執行個體

app.popover.destroy(el)- 銷毀彈出視窗執行個體

  • el - HTMLElement 或 string (具有 CSS 選擇器) 或 object。要銷毀的彈出視窗元素或彈出視窗執行個體。

app.popover.get(el)- 透過 HTML 元素取得彈出視窗執行個體

  • el - HTMLElement 或 string (具有 CSS 選擇器)。彈出視窗元素。

方法傳回彈出視窗執行個體

app.popover.open(el, targetEl, animate)- 開啟彈出視窗

  • el - HTMLElement 或 string (具有 CSS 選擇器)。要開啟的彈出視窗元素。
  • targetEl - HTMLElement 或 string (具有 CSS 選擇器)。目標元素，用於設定彈出視窗在該元素周圍的位置
  • animate - boolean。使用動畫開啟彈出視窗。

方法傳回彈出視窗執行個體

app.popover.close(el, animate)- 關閉彈出視窗

  • el - HTMLElement 或 string (具有 CSS 選擇器)。要關閉的彈出視窗元素。
  • animate - 布林值。以動畫關閉浮動訊息。

方法傳回彈出視窗執行個體

浮動訊息參數

現在讓我們來看看建立浮動訊息所需的可用參數清單

參數類型預設值說明
elHTMLElement浮動訊息元素。如果您在 HTML 中已有浮動訊息元素，且想要使用此元素建立新執行個體時，這會很有用
arrow布林值true啟用浮動訊息箭頭/角落
content字串完整的浮動訊息 HTML 版面配置字串。如果您想要動態建立浮動訊息元素時，這會很有用
verticalPosition字串auto強制浮動訊息垂直位置，可以是 auto、top 或 bottom
backdrop布林值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- 屬性傳遞所有可用的彈出視窗參數。例如

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

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

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

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

  • 如果您在 DOM 中有多個彈出視窗，則需要透過此 HTML 元素上的其他 data-popover=".my-popover" 屬性，指定適當的彈出視窗

根據上述說明

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

彈出視窗事件

彈出視窗將在彈出視窗元素上觸發下列 DOM 事件，以及在應用程式和彈出視窗執行個體上觸發事件

DOM 事件

事件目標說明
popover:open彈出視窗元素<div class="popover">當彈出視窗開始其開啟動畫時，將觸發事件
popover:opened彈出視窗元素<div class="popover">Popover 完成開啟動畫後觸發事件
popover:close彈出視窗元素<div class="popover">Popover 開始關閉動畫時觸發事件
popover:closed彈出視窗元素<div class="popover">Popover 完成關閉動畫後觸發事件

App 和 Popover 執行個體事件

Popover 執行個體會在自身執行個體和 app 執行個體上發出事件。App 執行個體事件具有相同名稱，但前面加上 popover。

事件參數目標說明
openpopoverpopoverPopover 開始開啟動畫時觸發事件。事件處理常式會收到 popover 執行個體作為參數
popoverOpenpopoverapp
openedpopoverpopoverPopover 完成開啟動畫後觸發事件。事件處理常式會收到 popover 執行個體作為參數
popoverOpenedpopoverapp
closepopoverpopoverPopover 開始關閉動畫時觸發事件。事件處理常式會收到 popover 執行個體作為參數
popoverClosepopoverapp
closedpopoverpopoverPopover 完成關閉動畫後觸發事件。事件處理常式會收到 popover 執行個體作為參數
popoverClosedpopoverapp
beforeDestroypopoverpopoverPopover 執行個體即將被銷毀之前觸發事件。事件處理常式會收到 popover 執行個體作為參數
popoverBeforeDestroypopoverapp

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>
改善此文件
在此頁面