node1
node2
node3
  1. home
  2. Version 4
  3. Javascript
  4. location_on

Modal Window

要素を拡大縮小可能なモーダルウィンドウで開きます。

画像を展開することでギャラリーページのようにしようできたり、検索画面などをボタンで開くようにしたりなど、幅広く使用することができます。

RADIXの機能の中で最もリッチな機能であり、人によっては不要であるかもしれません。ですが、スライドショーなどと違い、ページを選ばず存在しても使えないことはない機能であると考え実装しています。

Options

const radix = new Radix({
    modal: {
        active: true, // 機能のオン、オフ（boolean）
        selector: '.radix-modal', // モーダルで開く要素のセレクタ
        class: 'white', // モーダルウィンドウに追加するクラス
        magnify: true,  // 拡大縮小ボタンを表示するか
        resizeDuration: 300, // 拡大縮小の時間
        resizeEasing: 'easeInOutBack', // 拡大縮小のイージング
        scaleStep: [0.2, 0.4, 0.6, 0.8, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5], // 拡大縮小の倍率
        fit: true,  // 開いた時に自動で画面に合う大きさに拡大縮小するか
        drag: true,  // ドラッグスクロールを可能にするか
        wrap: false  // ラップモードで開くか（ラップモードは後述）
    }
});

デフォルト設定では、radix-modal クラスをつけた要素をモーダルウィンドウで開きます。
active, selector, scaleStep 以外の各オプション項目は要素の dataset を通じて、一つ一つに変更することができます。これは同じページ内で異なる設定でのモーダルの利用を可能にします。

dataset でのオプション設定には、 data-modal-{optionName} となるように名前をつなげて設定します。詳細は下記 Example を参照してください。

magnify オプションは画面上で拡大縮小ボタンの表示を設定するだけなので、これを false にしても fit 等でのモーダル展開時の倍率調整は動作します。

Usage and Example

モーダルで開きたい要素に radix-modal クラスをつけることで、開けるようになります。下の画像をクリックでモーダルウィンドウが開きます（正確には figure 要素に設定されているため、 figcaption ごと開きます）。

開くためのボタン要素を別に用意することもできます。その場合、ボタンの方に radix-modal クラスを設定します。
そして、data-modal-target 属性に開く対象となる要素を指定する CSS セレクタを記述します。これでボタンをクリックしたときに、ボタン自身でなくdata-modal-target の先が開かれることになります。

radix-modal-visible をつけると、モーダルウィンドウの中でのみ表示されるようになるため、これらを組み合わせて隠し要素を作成できます。
モーダル内にコピーされた要素には rdx-modal-item クラスが付与されます。これをフラグとしてスタイルを設定することで、モーダル内と外でデザインを変更することも可能です。

<div class="button-1 radix-modal" data-modal-target="#modal-logo">ボタンから開く</div>
ボタンから開く

それ以外に、data-modal-scale を設定すると fit や scaleStep といった他の設定を無視して展開時にその倍率に固定で開きます（小数第一位まで指定可能）。
また、 dataset でのオプション変更は boolean のものを変更する場合は、 [true, on, 1] を与えると true、[false, off, 0] を与えると false であると判断されます。

<div class="button-1 radix-modal" data-modal-target="#modal-logo" data-modal-scale="1.3" data-modal-magnify="off">固定倍率でロゴを開く</div>
固定倍率でロゴを開く

セレクタはCSSセレクタでの指定なので、, （カンマ）区切りで複数の指定ができます。例えば、radix-modal クラスを追加せずとも 本文中の画像はとりあえず全てモーダルで開くようにしたい、というときは以下のように設定できます。

const radix = new Radix({
    modal: {
        selector: '.radix-modal,main img'
    }
});

カラーバリエーション

class オプション、もしくは data-modal-class にクラス名を追加することで、ビューポート要素（モーダルウィンドウを構成する一番外側の要素）にクラスを追加できます。これはカンマ区切りで複数の指定が可能です。

ユーザ定義のクラスを指定しモーダルウィンドウをカスタマイズすることも可能ですが、想定された使い方はカラーバリエーションの変更です。標準で

のクラスが用意されており、これらを変更することでモーダルウィンドウのカラーを変更できます。

<div class="button-1 radix-modal" data-modal-target="#modal-logo" data-modal-class="black-opacity">背景黒でロゴを開く</div>
背景黒でロゴを開く

ユーザ定義でカラーモードクラスを追加したい場合、以下の4つのCSS変数の値を調整してください。

.your-color-set {
    --rmv-bg-color: rgba(0, 0, 0, 0.85);
    --rmv-text-color: #fff;
    --rmv-light: rgba(255, 255, 255, .3);
    --rmv-dark: rgba(0, 0, 0, .3);
}

ラップモード

今までの例は、画像や表といった拡大縮小をしたいコンテンツに対して最適化した設定です。
以下のボタンのように、文章やフォームといった、通常のHTMLレイアウトに組み込んで文章を表示したいコンテンツに対しては不適です。

<div class="button-1 radix-modal" data-modal-target="#modal-sakura" data-modal-fit="false">桜の樹の下には</div>
桜の樹の下には

これを改善する為のオプションが wrap です。これを true に設定すると magnify, fit, drag の全てのオプションが無視され全て false として扱われます。拡大縮小が無効になり、要素の最大幅にコンテンツがフィットするようになります。

<div class="button-1 radix-modal" data-modal-target="#modal-sakura" data-modal-wrap="true" data-modal-class="white-opacity">『桜の樹の下には』を読む</div>
『桜の樹の下には』を読む

縦方向に要素が溢れたときは通常通りスクロールできます。

angle_top