jQuery

【jQuery】jQueryを使ったダイアログボックスプラグイン。Easy Z modal

January 30, 2016
Easy Z modal

Easy Z modalはシンプルでダイナミックなプラグインのダイアログボックスプラグイン。

マークアップ

<html>
    <head>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>        
    </head>
    <body>
        <button type="button" ezmodal-target="#example">Click here!</button>
        <div id="example" class="ezmodal">
            <div class="ezmodal-container">
                <div class="ezmodal-header">
                    <div class="ezmodal-close" data-dismiss="ezmodal">x</div>
                    Title text
                </div>
                <div class="ezmodal-content">
                    ...
                </div>
                <div class="ezmodal-footer">
                    <button type="button" data-dismiss="ezmodal">Close</button>       			
                </div>
            </div>
        </div>

        <script type="text/javascript" src="src/ezmodal.min.js"></script>        
    </body>
</html>

オプション

Option Values Description
width {Number|String}, Default: 500 Use ‘Number’ or ‘small’, ‘medium’, ‘full’ responsive width
closable {Boolean}, Default: true Place false to block the closing on click outside the modal
escClose {Boolean}, Default: true Closes the modal with the esc key
autoOpen {Boolean}, Default: false True to the modal automatically open

データ属性

Data attribute Using Description
ezmodal-width
<div class="ezmodal" ezmodal-width="800">
Sets the width of the modal
ezmodal-closable
<div class="ezmodal" ezmodal-closable="false">
Place false to block the closing on click outside the modal
ezmodal-escclose
<div class="ezmodal" ezmodal-escclose="false">
Closes by pressing the ESC key
ezmodal-autoopen
<div class="ezmodal" ezmodal-autoopen="true">
Check modal is visible

イベント

onShow

$('#mymodal').ezmodal({
        'onShow': function () {
             --- 
        };
    });

onClose

 $('#mymodal').ezmodal({
        'onClose': function () {
             --- 
        };
    });

MITライセンス