モーダル画面をブラウザ全体に表示する方法【fullmod.js】｜DAD UNION

fullmod.jsを使ってモーダル画面をブラウザ全体に表示する方法をご紹介します。

Contents

モーダル画面をブラウザフルで表示するCSSの記述
モーダル画面をブラウザフルで表示するHTMLの記述
fullmod.jsを使ってモーダル画面をブラウザフルで表示するJavaScriptの記述
fullmod.jsを使ってモーダル画面をブラウザフルで表示するデモページ
ソース元：FullMod

モーダル画面をブラウザフルで表示するCSSの記述

※fullmod.min.cssファイルを読み込みます。ブラウザフルで表示されるモーダル画面（.fullmod）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="fullmod.min.css">
<style type="text/css">
body{
    text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  padding: 20px 0;
  line-height: 1.4em;
}
button{
    padding: 10px;
    font-size: 16px;
}
.fullmod{
    color: #ffffff;
    background-color: #cccccc;
}
</style>

モーダル画面をブラウザフルで表示するHTMLの記述

※buttonをonclick=showModal()でブラウザフルでモーダル画面（id=”myFullMod”）を表示します。モーダル画面は「×」ボタン（class=”btn-close”）で閉じます。必要に応じて変更して下さい。

<h1>「モーダル画面を開く」ボタンをクリックするとモーダル画面が表示されます</h1>

<button onclick="showModal()">モーダル画面を開く</button>


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

        <div class="fullmod-head">
            <h2 class="title">モーダル画面を開きました</h2>
            <div class="buttons">
                <a href="#" class="btn-close">&times;</a>
            </div>
        </div>

        <div class="fullmod-body">
            <p>右上の「×」クリックでモーダル画面を閉じます</p>
        </div>

    </div>
</div>

fullmod.jsを使ってモーダル画面をブラウザフルで表示するJavaScriptの記述

※jquery.min.js、fullmod.jsファイルを読み込みます。
$(モーダル画面エリア).fullmod({オプション})を記述します。
オプションではモーダル画面表示・非表示時の処理が設定できます（今回はconsole.logを出力してます）。
showModal()関数内でmyFullMod.show()処理を実行することでモーダル画面が表示されます。
必要に応じて変更して下さい。

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

<script>
    var myFullMod = $('#myFullMod').fullmod({
        onShowing: function (params) {
            console.log('showing');
        },
        onShown: function () {
            console.log('shown');
        },
        onHiding: function (params) {
            console.log('hiding');
        },
        onHidden: function () {
            console.log('hidden');
        }
    });

    function showModal() {
        myFullMod.show();
    }
</script>