忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryでモーダルウインドウ風の表示をする方法(css:display, css:z-index, fadeIn, fadeOut)

画面全体が暗くなり、画面の中央にウインドウが表示されるサイトをよく見かけますが、これを実現してみます。

方法自体は難しくなく、ウインドウとなる領域を 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 属性を設定しているところを fadeInfadeOut メソッドを使用すれば フェードイン、フェードアウト表示ができます。メソッドの説明は以下の通りです。

// フェードイン表示
$('要素').fadeIn([speed], [callback]);
// フェードアウト表示
$('要素').fadeOut([speed], [callback]);

このメソッドは非表示の要素をフェードイン表示または、表示の要素をフェードアウト表示します。

speed   : "slow", "normal", "fast" または時間をミリ秒で指定(デフォルト:"normal")
callback: 処理が完了した時の呼び出し関数を指定


関数を以下の様に変更すればできます。

// モーダルウインドウ表示
function displayModal() {
    $('.modal').fadeIn();
}
// モーダルウインドウ非表示
function closeModal() {
    $('.modal').fadeOut();
}











PR

コメント

コメントを書く