jQuery

【jQuery】モーダルウィンドウエフェクトJquery ModalBox

April 2, 2018
jquery.modalBox

Jquery ModalBoxはモーダルウィンドウエフェクトプラグイン。

How to use

プラグインファイルをインクルード。

<link href="../dist/css/jquery.modalBox.css" rel="stylesheet">
<script src="../dist/js/jquery.modalBox.js"></script>

bodyタグの後にモーダルを追加する

<div class="modal-box" id="demo">
    <div class="inner">
        <button class="close">&times;</button>
        Content
    </div>
</div>

モーダルボタンを表示

<a href="#modal-box" class="modal-box">Show modal</a>

プラグインを呼び出します。

$('a.modal-box').click(function(e){
    e.preventDefault();
    $( $(this).attr("href") ).modalBox("open");
});

Options

  1. openAnimationDuration
  2. closeAnimationDuration
  3. openAnimationEffect
  4. closeAnimationEffect
  5. closeOnEscape
  6. autoClose
  7. autoCloseDelay

Events

$('.modal').on('modalBox:___EVENT_NAME___', function(){
 
});
  1. beforeOpen
  2. afterOpen
  3. beforeClose
  4. afterClose

Methods

var api = $('#modal').data("modalBox");
  1. open
  2. close