JavaScript でウェブページの中央に div 要素をポップアップ表示する
このチュートリアルでは、Web ページの中央にあるポップウィンドウを開く方法について説明します。まず、この記事で取り上げるクエリは次のとおりです。
- ポップアップとは
- ポップアップのスタイリング
- JavaScript でポップアップを開いたり閉じたりします
- jQuery を使用してポップアップを開いたり閉じたりします
ポップアップとは
ポップアップは、基になるコンテンツの上にあるウィンドウで開く小さなウィンドウまたは小さなボックスです。
ポップアップを使用する主な使用例は、コンテンツ全体ではなく特定の情報に焦点を合わせ、ユーザーに確認を求めることです。または、ポップアップはモーダルとも呼ばれます。
ポップアップのスタイリング
ポップアップをメインコンテンツの上に表示したい、または少なくともメインコンテンツの上にあるように見せかける必要があるという唯一の理由から、ポップアップのスタイルを設定することが重要です。以下の例でこれを行う方法を見ていきます。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
height: 100%;
}
.overlay {
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
.popup {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
text-align: center;
background: white;
}
.popup h3 {
font-size: 15px;
height: 50px;
line-height: 50px;
color: black;
}
.CloseIcon{
cursor: pointer;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay" id="overlay">
<div class="popup">
<div onclick="CloseModal()" class="CloseIcon">✖</div>
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
この簡単な例では、ポップアップを表示するボタンを作成しました。しかし、最も重要なのは、すべてのコンテンツの上にわずかに黒い色で表示される overlay 要素があるため、ユーザーがそのコンテンツを見るのが困難になることです。
次に、popup 要素を作成し、overlay 要素と Web ページの中央の上に来るようにスタイルを設定しました。そうすることで、メインコンテンツを非表示にすることができました。
画面の中央にポップアップが開くと、ユーザーがはっきりと見ることができるのはそれだけなので、ユーザーの注意を引くことができます。ただし、overlay 要素は none に設定されているため、現時点では表示されません。
問題は、ポップアップをどのように切り替えるかです。JavaScript または jQuery を使用してこれを行うことができます。以下で両方について詳しく説明しましょう。
JavaScript でポップアップを開いたり閉じたりする
JavaScript を使用して、ポップアップスタイルプロパティを切り替えることができます。これを行うには、DOM 要素とその style プロパティにアクセスし、display タイプを none から block に変更すると、ポップアップが表示されます。
同様に、ユーザーが閉じるアイコンをクリックすると、none に戻すことができます。これを例で説明しましょう。
function OpenModal() {
let element = document.getElementById('overlay')
element.style.display = 'block'
}
function CloseModal() {
let element = document.getElementById('overlay')
element.style.display = 'none'
}
jQuery を使用してポップアップを開いたり閉じたりする
または、jQuery で同じことを繰り返すこともできます。ソースコードと必要な変更を見てみましょう。
function OpenModal() {
$('#overlay').show();
}
function CloseModal() {
$('#overlay').hide();
}
この例では、jQuery の show と hide のメソッドを使いました。display のプロパティを none から block に変更する代わりに、show は element の display プロパティを削除し、同様に、hide は display プロパティを none に設定します。
show は、display:none または jQuery で非表示になっているアイテムでのみ機能します。CSS の visibility プロパティでは機能しません。さらに、jQuery を使用する場合は、必ずヘッダーに jQuery CDN を追加してください（または jQuery パッケージをインストールしてください）。