miniModal

使用ファイル

ファイルはこちらからダウンロードしてください。

Download miniModal1.0.1.zip

ダウンロードファイルの内容

miniModal.js
miniModal.min.js
miniModal.css
miniModal.mini.css

miniModal.css

モーダルウィンドウの背景色や矢印、閉じるボタンなどのstyleまで記述されているcssファイル。

最初に使用するときはこちらのcssファイルを使用することをおすすめします。

miniModal.mini.css

モーダルウィンドウを成立させるための最低限のstyleしか記述されていないcssファイル。

カスタマイズ重視の人はこちらのcssファイルを使用することをおすすめします。

miniModal.cssをmin化したcssではありません。

使い方

次のファイルを読み込めばminiModalを使用することができます。

<link href="miniModal.css" rel="stylesheet">
<script src="miniModal.min.js"></script>

miniModal.jsを読み込んだ上で、
次の記述をすると、miniModalを使用することができます。

var myModal = new miniModal();

クリックをするとモーダルを表示するボタンのマークアップは以下のとおりです。

<p class="mmdl-btn" data-mmdl="【モーダルで表示したい要素やファイル】">モーダルを表示</p>

ボタンのclassや、data-mmdl属性はオプションで変更可能です。

対応形式

miniModalは画像やiframeなど、いくつかの形式に対応してモーダルウィンドウを表示することができます。

対応する形式を指定する必要はありません。

属性値から形式を判断し、モーダルウィンドウで表示します。

対応していない形式の場合は、コンソールボックスに「Cannot load」と表示されます。

画像

次の拡張子ファイルを画像タイプだと判断して、モーダルウィンドウで表示します。

.jpg
.jpeg
.gif
.png
.svg
.webp
.tiff
.bmp

マークアップ例

<p class="mmdl-btn" data-mmdl="image.jpg">【画像パス】</p>

インライン

同一ファイル内に記述されたインライン要素をモーダルで表示します。

モーダルウィンドウで表示したいインライン要素には「mmdl-hide」classを付けるとともに、任意のidを付けてください。

※「mmdl-hide」は単に display:none; を適用するためのclassです。

モーダルウィンドウのコンテンツとして表示されるのは任意のidを付けた要素内です。

任意のidを付けた要素を付けたタグは、モーダルウィンドウのコンテンツとしては読み込まれません。

マークアップ例

<p class="mmdl-btn" data-mmdl="#inline">インライン要素を表示</p>
<div id="inline" class="mmdl-hide">
  <!-- モーダルコンテンツ -->
</div>

YouTube/Google Map

data-mmdl属性が次のものをYouTube/Google Mapだと判断し、モーダルウィンドウで表示します。

https://www.youtube.com/embed　から始まるdata-mmdl属性
https://www.google.com/maps/embed　から始まるdata-mmdl属性

上記2つはそれぞれの埋め込みiframeのsrc属性値です。

iframeのオプションとして、様々な属性値を入れる必要がある場合は、
data-mmdl-iframeattr属性を用いて一括して入れることができます。

※data-mmdl-iframeattr属性はオプションで変更できます。

※data-mmdl-iframeattr属性はシングルクォートで囲みます。

マークアップ例

<!-- Youtube -->
<p class="mmdl-btn" data-mmdl="https://www.youtube.com/embed/【YouTube 動画ID】" data-mmdle-iframeattr='width="1042" height="586" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen'>YouTubeを表示</p>

<!-- Google Map -->
<p class="mmdl-btn" data-mmdl="https://www.google.com/maps/embed?" data-mmdle-iframeattr='width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""'>Google Mapを表示</p>

外部ファイル

次の拡張子で終わるファイルを外部ファイルとして読み込んで、
モーダルウィンドウで表示します。

.html
.xml

読み込んだ外部ファイルに記述されている内容をそのままモーダルコンテンツとして表示をします。

マークアップ例

<p class="mmdl-btn" data-mmdl="【外部ファイルパス】">外部ファイルを表示</p>

外部ファイル例

<div class="modal-content">
  <h2>モーダルタイトル</h2>
  <img src="" alt="">
  <p>テキストテキストテキストテキストテキストテキスト</p>
</div>

外部ファイルに上記のように記述されている場合、
「modal-content」のdivタグからモーダルコンテンツとして表示します。

オプション一覧

以下がすべてのオプションとデフォルトの値です。

var myModal = new miniModal({
    modalAttr:'data-mmdl',
    iframeAttr:'data-mmdl-iframeattr',
    modalBtnClass:'mmdl-btn',
    wrapperClass:'mmdl-wrapper',
    wrapperId:'mmdl-wrapper',
    loadingEl:'<div class="{%class%}" id="{%id%}"></div>',
    loadingClass:'mmdl-loading',
    loadingId:'mmdl-loading',
    bgClass:'mmdl-bg',
    bgId:'mmdl-bg',
    bgClose:true,
    contentClass:'mmdl-content',
    contentId:'mmdl-content',
    innerClass:'mmdl-inner',
    innerId:'mmdl-inner',
    bodyClass:'mmdl-open',
    close:{
        el:'<span class="{%class%}"></span>',
        btnClass:'mmdl-close',
        contentOut:false,
    },
    gallery:{
        enable:false,
        multipleLink:false,
        contentClass:'mmdl-content__gallery',
        attr:'data-mmdl-gallery',
        contentOut:false,
        prevEl:'<span class="mmdl-arrow {%class%}"></span>',
        nextEl:'<span class="mmdl-arrow {%class%}"></span>',
        prevClass:'mmdl-arrow__prev',
        prevContentClass:'mmdl-content__prev',
        nextClass:'mmdl-arrow__next',
        nextContentClass:'mmdl-content__next',
        counter:false,
        counterPosition:'top',
        counterEl:'<div class="mmdl-counter"><span id="{%current_id%}"></span> of <span id="{%total_id%}"></span></div>',
        counterCurrentid:'mmdl-counter__current',
        counterTotalid:'mmdl-counter__total'
    }
});

以下がモーダルウィンドウのデフォルトのマークアップです。

<body class="mmdl-open">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-wrapper" class="mmdl-wrapper">
    <div id="mmdl-content" class="mmdl-content">
      <span class="mmdl-close"></span>
      <div id="mmdl-inner" class="mmdl-inner">
        <!-- モーダルコンテンツ -->
      </div>
    </div>
  </div>
</body>

modalAttr

初期値：'data-mmdl'

モーダルウィンドウのファイルやリンク先を設定する属性を変更できるオプション。

iframeAttr

初期値：'data-mmdl-iframeattr'

YouTube、Google Mapのiframeタグのsrc属性以外の属性を設定する属性を変更できるオプション。

data-mmdl-iframeattrの使用例

<!-- Youtube -->
<p class="mmdl-btn" data-mmdl="https://www.youtube.com/embed/【YouTube 動画ID】" data-mmdle-iframeattr='width="1042" height="586" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen'>YouTubeを表示</p>

modalBtnClass

初期値:'mmdl-btn'

モーダルを表示するボタンのclassを変更できるオプション。

wrapperClass

初期値:'mmdl-wrapper'

モーダルのwrapperのclassを変更できるオプション。

モーダルウィンドウのマークアップ

wrapperId

初期値:'mmdl-wrapper'

モーダルのwrapperのidを変更できるオプション。

モーダルウィンドウのマークアップ

loadingEl

初期値:'<div class="{%class%}" id="{%id%}"></div>'

モーダルのローディングのマークアップを変更できるオプション。

id="{%id%}"のタグが一番外側になるようにマークアップしてください。

{%class%}には後述のloadingClass
{%id%}には後述のloadingIdが入る。

ローディング時のマークアップ

<div id="mmdl-wrapper" class="mmdl-wrapper">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-loading" class="mmdl-loading">
</div>

loadingClass

初期値:'mmdl-loading'

モーダルのローディングのclassを変更できるオプション。

loadingId

初期値:'mmdl-loading'

モーダルのローディングのidを変更できるオプション。

bgClass

初期値:'mmdl-bg'

モーダルの背景のclassを変更できるオプション。

bgId

初期値:'mmdl-bg'

モーダルの背景のidを変更できるオプション。

bgClose

初期値:true

モーダルの背景をクリックをして、モーダルが閉じるかどうかを変更できるオプション。

背景をクリックしてもモーダルを閉じないようにしたい場合にはfalseにする。

contentClass

初期値:'mmdl-content'

モーダルのコンテンツのclassを変更できるオプション。

モーダルウィンドウのマークアップ

contentId

初期値:'mmdl-content'

モーダルのコンテンツのidを変更できるオプション。

モーダルウィンドウのマークアップ

innerClass

初期値:'mmdl-innner'

モーダルのインナーのclassを変更できるオプション。

モーダルウィンドウのマークアップ

innerId

初期値:'mmdl-innner'

モーダルのインナーのidを変更できるオプション。

モーダルウィンドウのマークアップ

bodyClass

初期値:'mmdl-open'

モーダルオープン時にbodyタグに付くclassを変更できるオプション。

close

閉じるボタンを操作するオプションです。

後述のbtnClassのclassの要素をクリックすれば、モーダルが閉じます。

したがって、インラインや外部ファイルでのモーダルの場合、
btnClassで設定しているclassの要素があれば、その要素をクリックしてもモーダルを閉じることができます。

記述例

var myModal = new miniModal({
    close:{
        el:'<span class="{%class%}"></span>',
        btnClass:'mmdl-close',
        contentOut:false,
    }
)};

el

初期値:'<span class="{%class%}"></span>'

{%class%}には後述のbtnClassが入ります。

btnClass

初期値:'mmdl-close'

閉じるボタンのclassを変更できるオプションです。

contentOut

初期値:false

trueにすると、閉じるボタンをモーダルコンテンツの外に出します。

以下のマークアップに変更になります。

<body class="mmdl-open">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-wrapper" class="mmdl-wrapper">
    <span class="mmdl-close"></span>
    <div id="mmdl-content" class="mmdl-content">
      <div id="mmdl-inner" class="mmdl-inner">
        <!-- モーダルコンテンツ -->
      </div>
    </div>
  </div>
</body>

falseの場合のマークアップ

gallery

ギャラリー機能に関するオプションです。

galleryのenableオプションをtrueにすることでギャラリーを使用できます。

enableオプションをfalseにすると、
他のgalleryオプションを設定していても無視されます。

モーダル同士をギャラリーとして紐づけるには、
モーダルボタンにdata-mmdl-gallery属性を追加し、
同一の属性値を設定します。

もしdata-mmdl-gallery属性の属性値が1つしかない場合は、
単体のモーダルウィンドウとして表示されます。

この時、galleryオプションで設定している設定値は無視されます。

記述例

var myModal = new miniModal({
    gallery:{
        enable:false,
        multipleLink:false,
        contentClass:'mmdl-content__gallery',
        attr:'data-mmdl-gallery',
        contentOut:false,
        prevEl:'<span class="mmdl-arrow {%class%}"></span>',
        nextEl:'<span class="mmdl-arrow {%class%}"></span>',
        prevClass:'mmdl-arrow__prev',
        prevContentClass:'mmdl-content__prev',
        nextClass:'mmdl-arrow__next',
        nextContentClass:'mmdl-content__next',
        counter:false,
        counterPosition:'top',
        counterEl:'<div class="mmdl-counter"><span id="{%current_id%}"></span> of <span id="{%total_id%}"></span></div>',
        counterCurrentid:'mmdl-counter__current',
        counterTotalid:'mmdl-counter__total'
    }
)};

enable

初期値:false

ギャラリーオプション使用の有無を決定するオプションです。

enableオプションのみをtrueの場合のマークアップ

<body class="mmdl-open">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-wrapper" class="mmdl-wrapper">
    <div id="mmdl-content" class="mmdl-content">
      <span class="mmdl-close"></span>
      <span class="mmdl-arrow mmdl-arrow__prev"></span>
      <span class="mmdl-arrow mmdl-arrow__next"></span>
      <div id="mmdl-inner" class="mmdl-inner">
        <!-- モーダルコンテンツ -->
      </div>
    </div>
  </div>
</body>

multipleLink

初期値:false

trueにすると、1つのモーダルボタンに複数のソースをカンマ区切りで設定できるようになります。

記述例

<p class="mmdl-btn" data-mmdl="img1.jpg,img2.jpg,img3.jpg">

contentClass

初期値:'mmdl-content__gallery'

galleryオプションを使用するときに、モーダルコンテンツに追加されるclassを変更できるオプションです。

attr

初期値:'data-mmdl-gallery'

同じギャラリーグループに紐づける属性 data-mmdl-gallery を変更できるオプションです。

contentOut

初期値:false

trueにすると、ギャラリーの前へボタンと次へボタンをモーダルコンテンツの外に出します。

以下のマークアップに変更になります。

<body class="mmdl-open">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-wrapper" class="mmdl-wrapper">
    <span class="mmdl-arrow mmdl-arrow__prev"></span>
    <span class="mmdl-arrow mmdl-arrow__next"></span>
    <div id="mmdl-content" class="mmdl-content">
      <span class="mmdl-close"></span>
      <div id="mmdl-inner" class="mmdl-inner">
        <!-- モーダルコンテンツ -->
      </div>
    </div>
  </div>
</body>

falseの場合のマークアップ

prevEl

初期値:'<span class="mmdl-arrow {%class%}"></span>'

前へボタンのマークアップを変更できるオプションです。

{%class%} には後述のprevClassが入ります。

nextEl

初期値:'<span class="mmdl-arrow {%class%}"></span>'

次へボタンのマークアップを変更できるオプションです。

{%class%} には後述のnextClassが入ります。

prevClass

初期値:'mmdl-arrow__prev'

1つ前のモーダルへ遷移するボタンのclassを変更するオプションです。

prevClassで設定したclassの要素をクリックすれば、1つ前のモーダルへ遷移をします。

したがって、インラインや外部ファイルでのモーダルの場合、
prevClassで設定しているclassの要素があれば、その要素をクリックしても1つ前のモーダルへ遷移できます。

prevContentClass

初期値:'mmdl-content__prev'

1つ前へのボタンで遷移した後、モーダルコンテンツに追加されるclassを変更できるオプションです。

nextClass

初期値:'mmdl-arrow__next'

1つ後ろのモーダルへ遷移するボタンのclassを変更するオプションです。

nextClassで設定したclassの要素をクリックすれば、1つ後ろのモーダルへ遷移をします。

したがって、インラインや外部ファイルでのモーダルの場合、
nextClassで設定しているclassの要素があれば、その要素をクリックしても1つ後ろのモーダルへ遷移できます。

nextContentClass

1つ後へのボタンで遷移した後、モーダルコンテンツに追加されるclassを変更できるオプションです。

counter

初期値:false

trueにするとカウンターを追加するオプションです。

カウンターを追加した場合、次のようなマークアップになります。

<body class="mmdl-open">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-wrapper" class="mmdl-wrapper">
    <div id="mmdl-content" class="mmdl-content">
      <span class="mmdl-close"></span>
      <span class="mmdl-arrow mmdl-arrow__prev"></span>
      <span class="mmdl-arrow mmdl-arrow__next"></span>
      <div id="mmdl-inner" class="mmdl-inner">
        <div class="mmdl-counter"><span id="mmdl-counter__current"></span> of <span id="mmdl-counter__total"></span></div>
        <!-- モーダルコンテンツ -->
      </div>
    </div>
  </div>
</body>

<span id="mmdl-counter__current"></span> の中に表示中のモーダルの番号が表示され
<span id="mmdl-counter__total"></span> の表示中のギャラリーの総数が表示されます。

counterPosition

初期値:'top'

カウンターの表示位置を変更できるオプションです。

初期値 'top'と'bottom'が選択できます。

'bottom'の場合は、次のようなマークアップになります。

<body class="mmdl-open">
  <div id="mmdl-bg" class="mmdl-bg"></div>
  <div id="mmdl-wrapper" class="mmdl-wrapper">
    <div id="mmdl-content" class="mmdl-content">
      <span class="mmdl-close"></span>
      <span class="mmdl-arrow mmdl-arrow__prev"></span>
      <span class="mmdl-arrow mmdl-arrow__next"></span>
      <div id="mmdl-inner" class="mmdl-inner">
        <!-- モーダルコンテンツ -->
        <div class="mmdl-counter"><span id="mmdl-counter__current"></span> of <span id="mmdl-counter__total"></span></div>
      </div>
    </div>
  </div>
</body>

counterEl

初期値:
'<div class="mmdl-counter"><span id="{%current_id%}"></span> of <span id="{%total_id%}"></span></div>'

カウンターのマークアップを変更できるオプションです。

{%current_id%}には後述のcounterCurrentidが入ります。

{%total_id%}には後述のcounterTotalidが入ります。

counterCurrentid

初期値:'mmdl-counter__current'

現在表示中のモーダル番号を表示するタグのidを変更できるオプションです。

counterTotalid

初期値:'mmdl-counter__total'

現在表示中のギャラリーの総数を表示するタグのidを変更できるオプションです。

イベント一覧

miniModalではいくつかのイベントを用意しています。

どのイベントにも共通で「delay」が設定でき、miniModalの実行を遅延させる時間を指定できます。

遅延できる実行内容はイベントにより異なるので、それぞれの項目を読んでください。

イベントは以下のように使います。

var myModal = new miniModal();

myModal.on('btnClick',function(){
// 実行したい内容を記述する
},delay);

また以下のようにして複数のイベントを一括して、設定することもできます。

var myModal = new miniModal();

myModal.on('prevClick nextClick',function(){
// 実行したい内容を記述する
},delay);

詳細な使い方はデモページで確認できます。

btnClick

モーダルボタンをクリックしたときに発火するイベント。

delayを設定すると、モーダルウィンドウが開くのを遅延させる。

open

モーダルウィンドウが開いてから発火するイベント。

delayを設定すると、openイベントで実行する内容を遅延させる。

beforeClose

モーダルウィンドウの閉じるボタンをクリックすると発火するイベント。

delayを設定すると、モーダルウィンドウが閉じるのを遅延させる。

afterClose

モーダルウィンドウが閉じた後に発火するイベント。

delayを設定すると、afterCloseイベントで実行する内容を遅延させる。

prevClick

galley使用時の1つ前へボタンをクリックすると発火するイベント。

delayを設定すると、1つ前へ遷移するのを遅延させる。

nextClick

galley使用時の1つ後へボタンをクリックすると発火するイベント。

delayを設定すると、1つ後へ遷移するのを遅延させる。

prevOpen

galley使用時の1つ前へ遷移した後に発火するイベント。

delayを設定すると、prevOpenで実行する内容を遅延させる。

nextOpen

galley使用時の1つ後へ遷移した後に発火するイベント。

delayを設定すると、nextOpenで実行する内容を遅延させる。

メソッド一覧

miniModalでは以下のメソッドを用意しています。

メソッドは以下のように使います。

var myModal = new miniModal();

myModal.methodName();

詳細な使い方はデモページで確認できます。

modalClose()

開いているモーダルウィンドウを閉じます。

toPrev()

gallery使用時、1つ前へ遷移します。

toNext()

gallery使用時、1つ後へ遷移します。

getCurrent()

counter使用時、現在のモーダル番号を返します。

getTotal()

counter使用時、全モーダル数を返します。

classClear(class,galleryclass,prevClass,nextClass)

モーダルコンテンツ(mmdl-content要素)に付いているclassを削除します。

引数は4つありますが、全てbool値です。

引数1:class

初期値:true

falseに設定すると、メソッド実行時にモーダルコンテンツに付いているcontentClassも削除します。

引数2:galleryclass

初期値:true

falseに設定すると、メソッド実行時にモーダルコンテンツに付いているgallery使用時のcontentClassも削除します。

引数3:prevClass

初期値:true

falseに設定すると、メソッド実行時にモーダルコンテンツに付いているgallery使用時のprevClassも削除します。

引数4:nextClass

初期値:true

falseに設定すると、メソッド実行時にモーダルコンテンツに付いているgallery使用時のnextClassも削除します。