Javascript でウェブページの中央に Div 要素をポップアップ表示する
このチュートリアル記事では、Web ページの中央にあるポップウィンドウを開く方法について説明します。
ポップアップは、基になるコンテンツの上にあるウィンドウ上に開く小さなウィンドウまたは小さなボックスです。ポップアップを使用する主な使用例は、コンテンツ全体ではなく特定の情報に焦点を当てることです。たとえば、ユーザーに確認を求めます。または、ポップアップはモーダルとも呼ばれます。
HTML でのポップアップのスタイリング
ポップアップをメインコンテンツの上に表示したい、または少なくともメインコンテンツの上にあるように見せかける必要があるという唯一の理由から、ポップアップのスタイルを設定することが重要です。以下の例でこれを行う方法を見ていきます。
<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: #fff;
background: white;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay">
<div class="popup">
<div onclick="CloseModal()">✖</div> <!-- Shows Close Icon -->
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
したがって、この簡単な例では、ポップアップを表示するために使用されるボタンを作成しました。
しかし、最も重要なのは、すべてのコンテンツの上にわずかに黒い色で表示されるオーバーレイ要素があるため、ユーザーがそのコンテンツを見るのが困難になることです。
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 パッケージをインストールしてください）。