スポンサー
Support Framework7

ポップアップ

    ポップアップは、アプリのメインコンテンツの上にポップアップする、任意の 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を作成する際に必要となる、利用可能なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    elHTMLElementPopup要素。すでにHTML内にPopup要素があり、この要素を使って新しいインスタンスを作成したい場合に便利です。
    contentstringFull Popup HTML layout string. Popup要素を動的に作成したい場合に便利です。
    backdropbooleantrueポップアップの背景を有効にします(背後にある暗い半透明のレイヤー)。
    backdropElHTMLElement
    string
    HTML要素または文字列 カスタム背景要素のCSSセレクタ
    closeByBackdropClickbooleantrue有効にすると、背景をクリックするとポップアップが閉じます。
    closeOnEscapebooleanfalse有効にすると、ESCキーを押したときにポップアップが閉じます。
    animatebooleantrueポップアップの開閉をアニメーションで行うかどうか。.open().close()`メソッドで上書きすることができます。
    swipeToCloseboolean
    string
    falseスワイプジェスチャーでPopupを閉じることができるかどうか。上と下へのスワイプでポップアップを閉じられるようにするには true を、上へのスワイプのみでポップアップを閉じられるようにするには to-top (文字列) を、下へのスワイプのみで閉じられるようにするには to-bottom (文字列) を指定します。
    swipeHandlerHTMLElement
    string
    渡さない場合は、ポップアップ全体をスワイプして閉じることができます。ここでは、スワイプターゲットとして使用されるカスタム要素のHTML要素または文字列のCSSセレクタを渡すことができます。(swipeToClose も有効にする必要があります)
    pushbooleanfalse有効にすると、オープン時にビューを後ろに押します。トップセーフエリアが設定されている場合のみ動作します。Popup要素にpopup-pushクラスを追加することでも、この機能を有効にすることができます。
    onobject

    イベントハンドラーを持つオブジェクトです。例えば、以下のようになります。

    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 イベント

    EventTargetDescription
    popup:openPopup Element<div class="popup">イベントは Popup がオープニングアニメーションを開始したときに発生します。
    popup:openedPopup Element<div class="popup">イベントは Popup のオープニングアニメーションが完了した後に発生します。
    popup:closePopup Element<div class="popup">Popup が閉じるアニメーションを開始するとイベントが発生します。
    popup:closedPopup Element<div class="popup">ポップアップが閉じるアニメーションが完了するとイベントが発生する
    popup:swipestartPopup Element<div class="popup">イベントは、スワイプして閉じるインタラクションの最初にトリガされます(ユーザがポップアップをドラッグし始めたばかりのとき)。
    popup:swipemovePopup Element<div class="popup">イベントはスワイプから閉じるまでの動作時に発生します。
    popup:swipeendPopup Element<div class="popup">イベントはスワイプから閉じるまでの動作で発生する
    popup:swipeclosePopup Element<div class="popup">スワイプでポップアップが閉じた時にイベントが発生する
    popup:beforedestroyPopup Element<div class="popup">イベントはPopupインスタンスが破壊される直前に発生します。

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

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

    EventArgumentsTargetDescription
    openpopuppopupイベントは Popup がオープニングアニメーションを開始したときにトリガーされます。イベントハンドラは引数として popup インスタンスを受け取ります。
    popupOpenpopupapp
    openedpopuppopupイベントは Popup がそのオープニングアニメーションを完了した後にトリガーされます。As an argument event handler receive popup instance
    popupOpenedpopupapp
    closepopuppopupPopupが閉じるアニメーションを開始するとイベントが発生します。As an argument event handler receive popup instance
    popupClosepopupapp
    closedpopuppopupPopupが閉じるアニメーションを完了するとイベントが発生します。As an argument event handler receive popup instance
    popupClosedpopupapp
    beforeDestroypopuppopupイベントは Popup インスタンスが破壊される直前に発生します。As an argument event handler receive popup instance
    popupBeforeDestroypopupapp
    swipeStartpopuppopup イベントは、スワイプして閉じるインタラクションの最初にトリガされます(ユーザがポップアップをドラッグし始めたとき)
    popupSwipeStartpopupapp
    swipeMovepopuppopup イベントは、スワイプから閉じるまでの動作の際に発生します。
    popupSwipeMovepopupapp
    swipeEndpopuppopup イベントは、スワイプから閉じるまでの動作で発生します。
    popupSwipeEndpopupapp
    swipeClosepopuppopup スワイプでポップアップが閉じた時にイベントが発生します。
    popupSwipeClosepopupapp

    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>