fullmod.jsを使ってモーダル画面をブラウザ全体に表示する方法をご紹介します。
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">×</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
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。