JavaScript

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

  /

Webサイトにモーダル画面を実装することで、ユーザーに重要な情報を伝えたり、フォーム入力を促したりすることができます。特に、ブラウザ全体にモーダルを表示することで、より目立たせたり、集中して内容を確認してもらうことが可能です。

本記事では、jQueryプラグインの fullmod.js を使用して、ブラウザフルスクリーンのモーダル画面を簡単に実装する方法を解説します。CSSやHTMLの基本的な記述から、JavaScriptを使ったモーダルの開閉処理まで、初心者でもわかりやすく紹介していきます。

Contents

モーダル画面をブラウザフルで表示する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>

fullmod.jsを使ってモーダル画面をブラウザフルで表示するデモページ

fullmod.jsを使ってモーダル画面をブラウザフルで表示するデモページ

ソース元：FullMod

以下がソース元です。
FullMod

まとめ

fullmod.js を使えば、簡単にブラウザ全体にモーダル画面を表示することができます。ボタンをクリックするだけでスムーズに開閉でき、オプションを活用すれば、表示・非表示時の処理を自由にカスタマイズすることも可能です。

本記事で紹介したサンプルコードを活用し、自分のWebサイトに適したモーダルを導入してみてください。視認性の高いモーダルを使うことで、ユーザーの操作性を向上させ、重要な情報を的確に伝えることができます。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

モーダル fullmod.js
関連記事