便利なモーダルプラグイン MODAAL

2017.02.28

どうもfujiharaです。今年度も残す所あと1ヶ月になりましたね。
今回は今年知った便利なモーダルプラグインであるMODAALを紹介します。

何が便利？？

このプラグインを紹介したいと思った一番の理由はモーダルを表示したときに背景がスクロールしないところです。
モーダルを導入するときに背景を固める処理を毎回入れなくてすみます。これがそれが大きい！

基本的な使い方

使い方は一般的なモーダルプラグインと似ています。
モーダルを開くリンクタグを作成してモーダルの設定を入れて呼ぶだけです。


header
<link rel="stylesheet" href="//cdn.jsdelivr.net/modaal/0.3.1/css/modaal.min.css">
<script src="//cdn.jsdelivr.net/modaal/0.3.1/dist/js/modaal.min.js">

html,
<a href="#content" class="inline">モーダルを開く</a>
<div id="content">モーダルの中身</div>

js,
$(".inline").modaal({});

その他の使い方, ヘッダーは上記と同じです。

基本的な使い方で紹介したのとは別に何点かあります。

AJAX


html,
<a href="http://ajax.com" class="ajax">ajaxで取得しモーダルを開く</a>

js,
$(".ajax").modaal({type:'ajax'});

画像
枚数は1枚でなくても可能です。複数あるとよしなにスライドショーにしてくれます。(クラス名を同一にします）


html,
<a href="image_url1" class="image">imageモーダルを開く</a>
<a href="image_url2" class="image">imageモーダルを開く</a>
<a href="image_url3" class="image">imageモーダルを開く</a>

js,
$(".image").modaal({type:'image'});

ビデオ


html,
<a href="http://videourl.com/?id=xxxxx" class="video">videoモーダルを開く</a>

js,
$(".video").modaal({type:'video'});

iframe


html,
<a href="http://c-brains.jp" class="iframe">iframeモーダルを開く</a>

js,
$(".iframe").modaal({type:'iframe', width: 600, height:400});

確認用モーダル html, <a href="javascript:void(0);" class="confirmation">確認用モーダルを開く</a>


js,
$(".confirmation").modaal({
  type:'confirm',
  confirm_button_text: 'OK時のボタン', 
  confirm_cancel_button_text: 'キャンセルボタン文字',
  confirm_title: '確認タイトル',
  confirm_content: 'この内容でよろしいですか？',
  //OKボタン時の処理
  confirm_callback: function() {
    alert('承りました');
  },
  //キャンセル時の処理
  confirm_cancel_callback: function() {
    alert('キャンセルしました');
  }  
});

Instagram


html,
<a href="#ig" class="modaal" data-modaal-type="instagram" data-modaal-instagram-id="インスタの画像ID">instagramモーダルを開く</a>

その他オプション,関数

その他の設定を簡単に紹介します。値はデフォルト値から書いています。


animation: 'fade/none' // アニメーション
hide_close: true/false // 閉じるボタンを隠す
background: '#000' // 背景色
overlay_opacity: 0～1.0 // opacity
overlay_close: true/false //モーダル背景クリック時に閉じるか
start_open: false/true // ページロード時に表示するか
fullscreen: false/true // フルスクリーンモードにするか
close_text: 'Close' // 閉じるボタンの文言

before_open: function(e) {} // 開く前に行いたい処理
after_open: function(modal_wrapper) {} //開いた後
before_close: function(modal_wrapper) {} //閉じた後

関数
$('.modal').modaal()で開いたモーダルは $('.modal').modaal('close') で閉じることができます。

その他の細かい設定はModaalのgithubに記載されています。

皆さんも是非使ってみて下さい！