ポップアップ

ポップアップは、アプリのメインコンテンツの上にポップアップする、任意の HTML コンテンツを持つポップアップウィンドウです。ポップアップは他のオーバーレイと同様に、いわゆる "Temporary Views "の一部です。

ポップアップのレイアウト

ポップアップのレイアウトはとてもシンプルです。

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

ポップアップのサイズ

デフォルトでは、ポップアップのサイズは、携帯電話とタブレット（iPad）では少し異なります。スマホではフルスクリーン、タブレットでは幅と高さが630pxになっています。タブレットでフルスクリーンサイズにしたい場合は、必要なポップアップに「popup-tablet-fullscreen」クラスを追加する必要があります。

<body>
  ...
  <!-- このポップアップはタブレットでフルスクリーンサイズになります -->
  <div class="popup popup-tablet-fullscreen">
    Any HTML content goes here
  </div>
</body>

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

Popupに関連するアプリのメソッドを見てみましょう。

app.popup.create(parameters)- Popupインスタンスの作成

parameters - object. ポップアップのパラメータを持つオブジェクト

作成されたPopupのインスタンスを返すメソッド

app.popup.destroy(el)- Popupインスタンスの破棄

el - HTMLElementまたはstring（CSSセレクタ付き）またはobject。破棄するポップアップエレメントまたはポップアップインスタンスです。

app.popup.get(el)- HTML要素によるPopupインスタンスの取得

el - HTMLElement または string (CSS Selectorを使用). Popupの要素です。

メソッドはPopupのインスタンスを返します

app.popup.open(el, animate)- ポップアップを開く

el - HTMLElement または string (with CSS Selector). 開くポップアップの要素
animate - boolean。Popupをアニメーションで開きます。

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

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

el - HTMLElementまたはstring(CSSセレクタ付き)。ポップアップの要素を閉じます。
animate - boolean。アニメーションでPopupを閉じます。

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

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

ここでは、Popupを作成する際に必要となる、利用可能なパラメータの一覧を見てみましょう。

Parameter	Type	Default	Description
el	HTMLElement		Popup要素。すでにHTML内にPopup要素があり、この要素を使って新しいインスタンスを作成したい場合に便利です。
content	string		Full Popup HTML layout string. Popup要素を動的に作成したい場合に便利です。
backdrop	boolean	true	ポップアップの背景を有効にします（背後にある暗い半透明のレイヤー）。
backdropEl	HTMLElement string		HTML要素または文字列カスタム背景要素のCSSセレクタ
closeByBackdropClick	boolean	true	有効にすると、背景をクリックするとポップアップが閉じます。
closeOnEscape	boolean	false	有効にすると、ESCキーを押したときにポップアップが閉じます。
animate	boolean	true	ポップアップの開閉をアニメーションで行うかどうか。.open()`と`.close()`メソッドで上書きすることができます。
swipeToClose	boolean string	false	スワイプジェスチャーでPopupを閉じることができるかどうか。上と下へのスワイプでポップアップを閉じられるようにするには `true` を、上へのスワイプのみでポップアップを閉じられるようにするには `to-top` (文字列) を、下へのスワイプのみで閉じられるようにするには `to-bottom` (文字列) を指定します。
swipeHandler	HTMLElement string		渡さない場合は、ポップアップ全体をスワイプして閉じることができます。ここでは、スワイプターゲットとして使用されるカスタム要素のHTML要素または文字列のCSSセレクタを渡すことができます。(`swipeToClose` も有効にする必要があります)
push	boolean	false	有効にすると、オープン時にビューを後ろに押します。トップセーフエリアが設定されている場合のみ動作します。Popup要素に`popup-push`クラスを追加することでも、この機能を有効にすることができます。
on	object		イベントハンドラーを持つオブジェクトです。例えば、以下のようになります。 `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- 属性で渡すことができます。例えば、以下のようになります。

<!-- パラメータを kebab-case の data 属性として渡す -->
<div class="popup" data-close-on-escape="true" data-swipe-to-close="to-bottom">
  ...
</div>

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

ポップアップを作成するためには、メソッドを呼び出す必要があります。

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

その後、便利なメソッドとプロパティを持つ初期化されたインスタンス（上記の例では popup という変数）が作成されます。

Properties
popup.app	グローバルアプリのインスタンスへのリンク
popup.el	ポップアップのHTML要素
popup.$el	ポップアップ HTML 要素を持つ Dom7 インスタンス
popup.backdropEl	背景のHTML要素
popup.$backdropEl	背景のHTML要素を持つDom7のインスタンス
popup.params	ポップアップパラメータ
popup.opened	ポップアップが開かれるかどうかを示すブール値のプロップ
Methods
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にある場合）を開いたり閉じたりすることができます。

ポップアップを開くには、"popup-open" クラスを任意の HTML 要素 (link が望ましい) に追加する必要があります。
ポップアップを閉じるには、"popup-close"クラスを任意のHTML要素に追加する必要があります（リンクが望ましい）。
DOMに複数のポップアップがある場合は、このHTML要素にdata-popup=".my-popup"属性を追加して、適切なポップアップを指定する必要があります。

上記のメモによると

<!-- data-popup 属性では、開く必要のあるポップアップの CSS セレクタを指定します。 -->
<p><a href="#" data-popup=".my-popup" class="popup-open">Open Popup</a></p>

<!-- また、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">
            <!-- ポップアップを閉じるためのリンク -->
            <a class="link popup-close">Close</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        ...
      </div>
    </div>
  </div>
  ...
</div>

ポップアップのイベント

popupは、popup要素に対する以下のDOMイベントと、appとpopupインスタンスに対するイベントを発生させます。

DOM イベント

Event	Target	Description
popup:open	Popup Element<div class="popup">	イベントは Popup がオープニングアニメーションを開始したときに発生します。
popup:opened	Popup Element<div class="popup">	イベントは Popup のオープニングアニメーションが完了した後に発生します。
popup:close	Popup Element<div class="popup">	Popup が閉じるアニメーションを開始するとイベントが発生します。
popup:closed	Popup Element<div class="popup">	ポップアップが閉じるアニメーションが完了するとイベントが発生する
popup:swipestart	Popup Element<div class="popup">	イベントは、スワイプして閉じるインタラクションの最初にトリガされます（ユーザがポップアップをドラッグし始めたばかりのとき）。
popup:swipemove	Popup Element<div class="popup">	イベントはスワイプから閉じるまでの動作時に発生します。
popup:swipeend	Popup Element<div class="popup">	イベントはスワイプから閉じるまでの動作で発生する
popup:swipeclose	Popup Element<div class="popup">	スワイプでポップアップが閉じた時にイベントが発生する
popup:beforedestroy	Popup Element<div class="popup">	イベントはPopupインスタンスが破壊される直前に発生します。

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

ポップアップインスタンスは、セルフインスタンスとアプリインスタンスの両方に対してイベントを発行します。アプリインスタンスのイベントは、同じ名前でプレフィックスが popup となっています。

Event	Arguments	Target	Description
open	popup	popup	イベントは Popup がオープニングアニメーションを開始したときにトリガーされます。イベントハンドラは引数として popup インスタンスを受け取ります。
popupOpen	popup	app
opened	popup	popup	イベントは Popup がそのオープニングアニメーションを完了した後にトリガーされます。As an argument event handler receive popup instance
popupOpened	popup	app
close	popup	popup	Popupが閉じるアニメーションを開始するとイベントが発生します。As an argument event handler receive popup instance
popupClose	popup	app
closed	popup	popup	Popupが閉じるアニメーションを完了するとイベントが発生します。As an argument event handler receive popup instance
popupClosed	popup	app
beforeDestroy	popup	popup	イベントは Popup インスタンスが破壊される直前に発生します。As an argument event handler receive popup instance
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 Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-popup-border-radius: 0px;
  --f7-popup-tablet-width: 630px;
  --f7-popup-tablet-height: 630px;
  --f7-popup-transition-duration: 400ms;
  --f7-popup-push-border-radius: 10px;
  --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-box-shadow: none;
}
.md {
  --f7-popup-tablet-border-radius: 4px;
  --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
}
.aurora {
  --f7-popup-tablet-border-radius: 8px;
  --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Popup</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>
          <a class="button popup-open" href="#" data-popup=".popup-about">Open About Popup</a>
        </p>
        <p>
          <a class="button popup-open" href="#" data-popup=".popup-services">Open Services Popup</a>
        </p>
        <p>
          <a class="button dynamic-popup" href="#">Create dynamic Popup</a>
        </p>
        <p>
          <a class="button popup-open" href="#" data-popup=".popup-swipe-to-close">Popup with swipe to close</a>
        </p>
        <p>
          <a class="button popup-open" href="#" data-popup=".popup-swipe-to-close-handler">Popup with swipe to close
            handler</a>
        </p>
        <p>
          <a class="button popup-open" href="#" data-popup=".popup-push">Popup Push</a>
        </p>
      </div>
    </div>
  </div>
  <div class="popup popup-about">
    <div class="block">
      <p>About</p>
      <p><a class="link popup-close" href="#">Close popup</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.
        Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam
        vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus
        luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
        pellentesque
        nec metus id, congue elementum odio. Donec turpis tellus, mollis ac leo eget, accumsan fermentum lorem.
        Aliquam et elementum neque. Vestibulum sed egestas ipsum.</p>
    </div>
  </div>
  <div class="popup popup-services">
    <div class="block">
      <p>Services</p>
      <p><a class="link popup-close" href="#">Close popup</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.
        Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam
        vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus
        luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
        pellentesque
        nec metus id, congue elementum odio. Donec turpis tellus, mollis ac leo eget, accumsan fermentum lorem.
        Aliquam et elementum neque. Vestibulum sed egestas ipsum.</p>
    </div>
  </div>
  <div class="popup popup-swipe-to-close">
    <div class="block text-align-center">
      <p>Swipe me up or down to close</p>
    </div>
  </div>
  <div class="popup popup-swipe-to-close-handler">
    <div class="block">
      <p class="my-swipe-to-close-handler"><b>Swipe works only on this paragraph</b></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.
        Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam
        vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus
        luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
        pellentesque
        nec metus id, congue elementum odio. Donec turpis tellus, mollis ac leo eget, accumsan fermentum lorem.
        Aliquam et elementum neque. Vestibulum sed egestas ipsum.</p>
    </div>
  </div>
  <div class="popup popup-push">
    <div class="block">
      <p>Popup Push</p>
      <p><a class="link popup-close" href="#">Close popup</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.
        Quisque sodales scelerisque est, at porta justo cursus ac. Integer vitae quam a ante lobortis lobortis. Nam
        vehicula sagittis quam, sit amet congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus
        luctus leo ac fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
        pellentesque
        nec metus id, congue elementum odio. Donec turpis tellus, mollis ac leo eget, accumsan fermentum lorem.
        Aliquam et elementum neque. Vestibulum sed egestas ipsum.</p>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $, $on }) => {
    $on('pageInit', () => {
      // DOM events for About popup
      $('.popup-about').on('popup:open', function (e) {
        console.log('About popup open');
      });
      $('.popup-about').on('popup:opened', function (e) {
        console.log('About popup opened');
      });

      // Create dynamic Popup
      var dynamicPopup = $f7.popup.create({
        content: `
          <div class="popup">
            <div class="block">
              <p>Popup created dynamically.</p>
              <p><a href="#" class="link popup-close">Close me</a></p>
            </div>
          </div>
        `,
        // Events
        on: {
          open: function (popup) {
            console.log('Popup open');
          },
          opened: function (popup) {
            console.log('Popup opened');
          },
        }
      });
      // Events also can be assigned on instance later
      dynamicPopup.on('close', function (popup) {
        console.log('Popup close');
      });
      dynamicPopup.on('closed', function (popup) {
        console.log('Popup closed');
      });

      // Open dynamic popup
      $('.dynamic-popup').on('click', function () {
        dynamicPopup.open();
      });

      // Create Popup with swipe to close
      var swipeToClosePopup = $f7.popup.create({
        el: '.popup-swipe-to-close',
        swipeToClose: true,
      });

      // Create Popup with swipe to close handler
      var swipeToClosePopup = $f7.popup.create({
        el: '.popup-swipe-to-close-handler',
        swipeToClose: true,
        swipeHandler: '.my-swipe-to-close-handler',
      });
    })

    return $render;
  }
</script>