jQuery

【jQuery】軽量のjQueryフルスクリーンモーダルコンポーネントFullMod

August 23, 2018
FullMod

FullModは軽量のjQueryフルスクリーンモーダルコンポーネントです。

Usage

headにコードを追加

<link href="fullmod.min.css" rel="stylesheet" type="text/css">

body要素を閉じる前に、次のコードを追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="fullmod.min.js"></script>

HTMLを追加

<div id="myFullMod" class="fullmod">
    <div class="fullmod-content">

        <!--FullMod Header-->
        <div class="fullmod-head">
            <h2 class="title">This is my title</h2>
            <div class="buttons">
                <a href="#" class="btn-close">&times;</a>
            </div>
        </div>

        <!--FullMod Body-->
        <div class="fullmod-body">
            <p>This is the content of the modal.</p>
        </div>

    </div>
</div>

以下を使用してモーダルを表示

<script>
    var myFullMod = $('#myFullMod').fullmod();  
    myFullMod.show();
</script>

Events

$('#myFullMod').fullmod({
    onShowing: function(params) {
        console.log('showing');
    }
});