ポップアップ

ポップアップは、アプリのメインコンテンツの上に表示される任意の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, animate)- ポップアップを開きます。

el - HTMLElement または文字列（CSSセレクター付き）。開くポップアップ要素。
animate - ブール値。アニメーション付きでポップアップを開きます。

メソッドはポップアップのインスタンスを返します。

app.popup.close(el, animate)- ポップアップを閉じます。

el - HTMLElement または文字列（CSSセレクター付き）。閉じるポップアップ要素。
animate - ブール値。アニメーション付きでポップアップを閉じます。

メソッドはポップアップのインスタンスを返します。

それでは、ポップアップを作成するために必要なパラメーターのリストを見てみましょう。

パラメーター	型	デフォルト	説明
el	HTMLElement		ポップアップ要素。HTMLにすでにポップアップ要素があり、この要素を使用して新しいインスタンスを作成する場合に役立ちます。
content	文字列		完全なポップアップHTMLレイアウト文字列。ポップアップ要素を動的に作成する場合に役立ちます。
backdrop	ブール値	true	ポップアップバックドロップ（背後の暗い半透明レイヤー）を有効にします。
backdropEl	HTMLElement 文字列		カスタムバックドロップ要素のHTML要素または文字列CSSセレクター。
backdropUnique	ブール値	有効にすると、このモーダル専用の独自のバックドロップ要素が作成されます。
closeByBackdropClick	ブール値	true	有効にすると、バックドロップをクリックするとポップアップが閉じられます。
closeOnEscape	ブール値	false	有効にすると、ESCキーを押すとポップアップが閉じられます。
animate	ブール値	true	ポップアップをアニメーション付きで開閉するかどうかを指定します。`open()`メソッドと`close()`メソッドで上書きできます。
swipeToClose	ブール値文字列	false	スワイプジェスチャーでポップアップを閉じることができるかどうかを指定します。`true`にすると、上下へのスワイプでポップアップを閉じることができます。`to-top`（文字列）にすると、上へのスワイプのみでポップアップを閉じることができます。`to-bottom`（文字列）にすると、下へのスワイプのみでポップアップを閉じることができます。
swipeHandler	HTMLElement 文字列		指定しない場合、ポップアップ全体をスワイプして閉じることができます。スワイプターゲットとして使用するHTML要素または文字列CSSセレクターをここに渡すことができます。（`swipeToClose`も有効にする必要があります）
push	ブール値	false	有効にすると、開いているときに背後のビューをプッシュします。トップセーフエリアがある場合にのみ機能します。ポップアップ要素に`popup-push`クラスを追加することでも有効にできます。
containerEl	HTMLElement 文字列		モーダルをマウントする要素（デフォルトはアプリのルート要素）。
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にある場合）を開閉することができます。

ポップアップを開くには、任意の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`という接頭辞が付いた同じ名前が付けられています。

イベント	引数	ターゲット	説明
open	popup	popup	ポップアップが開き始めるアニメーション時にトリガーされます。引数として、イベントハンドラーはポップアップインスタンスを受け取ります。
popupOpen	popup	app
opened	popup	popup	ポップアップの開きアニメーションが完了した後にトリガーされます。引数として、イベントハンドラーはポップアップインスタンスを受け取ります。
popupOpened	popup	app
close	popup	popup	ポップアップが閉じ始めるアニメーション時にトリガーされます。引数として、イベントハンドラーはポップアップインスタンスを受け取ります。
popupClose	popup	app
closed	popup	popup	ポップアップの閉じアニメーションが完了した後にトリガーされます。引数として、イベントハンドラーはポップアップインスタンスを受け取ります。
popupClosed	popup	app
beforeDestroy	popup	popup	ポップアップインスタンスが破棄される直前にトリガーされます。引数として、イベントハンドラーはポップアップインスタンスを受け取ります。
popupBeforeDestroy	popup	app
swipeStart	popup	popup	スワイプして閉じるインタラクションの開始時にトリガーされます（ユーザーがポップアップのドラッグを開始したとき）。
popupSwipeStart	popup	app	スワイプして閉じるインタラクションの開始時にトリガーされます（ユーザーがポップアップのドラッグを開始したとき）。
swipeMove	popup	popup	スワイプして閉じる移動インタラクション時にトリガーされます。
popupSwipeMove	popup	app	スワイプして閉じる移動インタラクション時にトリガーされます。
swipeEnd	popup	popup	スワイプして閉じる操作の解放時にトリガーされます。
popupSwipeEnd	popup	app	スワイプして閉じる操作の解放時にトリガーされます。
swipeClose	popup	popup	スワイプでポップアップが閉じられたときにトリガーされます。
popupSwipeClose	popup	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>

このドキュメントを改善する

このページについて

ポップアップレイアウト
ポップアップサイズ
ポップアップアプリメソッド
ポップアップパラメーター
ポップアップメソッドとプロパティ
リンクによるポップアップの制御
ポップアップイベント

DOMイベント
アプリとポップアップインスタンスのイベント

CSS変数
例

ポップアップ

ポップアップレイアウト

ポップアップサイズ

ポップアップアプリメソッド

ポップアップパラメーター

ポップアップメソッドとプロパティ

リンクによるポップアップの制御

ポップアップイベント

DOMイベント

アプリとポップアップインスタンスのイベント

CSS変数

例