×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
画面全体が暗くなり、画面の中央にウインドウが表示されるサイトをよく見かけますが、これを実現してみます。
方法自体は難しくなく、ウインドウとなる領域を div タグで表示し、その div 領域を表示・非表示の処理を行います。 （「display」属性を「block」(表示)、または「none」(非表示)に設定します。）
ウインドウの周りに全体的に暗い領域を作るために、上記の div タグをさらにラップする div タグを設けます。
全体の div タグの大きさを画面全体とし、背景色を薄い黒色にします。 ウインドウの div タグは大きさを適当に決め背景色を白色にします。
更に HTML 要素の表示重なりを決める z-index をウインドウの div タグの方を、全体の div タグの z-index より大きい値にします。 こうするとウインドウの div タグが上に表示されます。
今回のデモ HTML ファイル側のソースを以下に示します。
■ブロック領域を表示・非表示にすることでモーダルウインドウ風
<html>
<head>
<meta charset="utf-8">
<title>test modal</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// モーダルウインドウ表示
function displayModal() {
$('.modal').css('display', 'block');
}
// モーダルウインドウ非表示
function closeModal() {
$('.modal').css('display', 'none');
}
</script>
<style>
.modal {
display: none;
z-index: 1;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7);
}
.modal-window{
z-index: 2;
width: 500px;
margin: 20% auto;
padding: 20px;
background-color: white;
}
</style>
</head>
<body>
<h2>test modal</h2>
<button onclick="displayModal();">Display Modal</button>
<div class="modal">
<div class="modal-window">
<div class="modal-contents">
<p>これはモーダルウインドウです。</p>
<button onclick="closeModal();">Close Modal</button>
</div>
</div>
</div>
</body>
</html>
上のプログラムで display 属性を設定しているところを fadeIn 、 fadeOut メソッドを使用すれば フェードイン、フェードアウト表示ができます。メソッドの説明は以下の通りです。
// フェードイン表示
$('要素').fadeIn([speed], [callback]);
// フェードアウト表示
$('要素').fadeOut([speed], [callback]);
このメソッドは非表示の要素をフェードイン表示または、表示の要素をフェードアウト表示します。
speed : "slow", "normal", "fast" または時間をミリ秒で指定(デフォルト:"normal")
callback: 処理が完了した時の呼び出し関数を指定
関数を以下の様に変更すればできます。
// モーダルウインドウ表示
function displayModal() {
$('.modal').fadeIn();
}
// モーダルウインドウ非表示
function closeModal() {
$('.modal').fadeOut();
}
PR
コメント