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アナリティクスタグは流用しないで下さい。
ディスプレイ広告
ディスプレイ広告