概要
Javascriptを使用してポップアップを自作する方法です。
サンプル
今回作成するのは、
- ボタンをクリックしてポップアップを表示
- ポップアップの「×」ボタンをクリックしてポップアップを閉じる
- オーバレイをクリックしてポップアップを閉じる
See the Pen Untitled by take it easy (@take-it-easy) on CodePen.
コーディング方法
HTML
<!-- ポップアップを開くボタン -->
<div class="popup-open">
<a href="javascript:popup_open();">ポップアップを表示します。</a>
</div>
<!-- ポップアップ -->
<div id="popup-overlay">
<div class="popup-window">
<div class="popup-header">
<h2>ポップアップの見出し</h2>
<div class="popup-close">
<a href="javascript:popup_close();">×</a>
</div>
</div>
<div class="popup-body">
<p>※ポップアップに表示する内容はこちらに記述します。</p>
</div>
</div>
</div>
CSS
/* リンクの共通レイアウト */
a {
text-decoration: none;
color: #000;
}
/* ポップアップを開くの擬似ボタン */
.popup-open a {
display: block;
text-align: center;
border: 1px solid #000;
width: 250px;
padding: 10px;
margin: 0 auto;
}
/* ポップアップが開いた時のオーバレイ */
#popup-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
/* ポップアップ */
.popup-window {
width: 500px;
height: 300px;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
/* ポップアップのヘッダー */
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: rgba(0, 0, 0, .1);
border-radius: 10px 10px 0 0;
}
/* ポップアップの見出し */
.popup-header h2 {
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 0;
}
/* ポップアップの内容 */
.popup-body {
padding: 0 10px;
}
JavaScript
/* ページが開いた時 */
window.onload = function () {
// ポップアップを表示しない
popup_close();
};
/* ポップアップを開く */
function popup_open() {
var popup = document.getElementById('popup-overlay');
popup.style.display ="block";
}
/* ポップアップを閉じる */
function popup_close() {
var popup = document.getElementById('popup-overlay');
popup.style.display ="none";
}
/* クリックイベントの登録 */
addEventListener('click', overlay_popup_close);
/* タップイベントの登録 */
addEventListener('touchstart', overlay_popup_close);
/* オーバレイをクリックした時、ポップアップを閉じる */
function overlay_popup_close(e) {
var popup = document.getElementById('popup-overlay');
if (e.target == popup) {
popup.style.display = 'none';
}
}
ポイント
ページを開いた時に、ポップアップが表示されないように、「display: none」を設定します。
クリックイベントで、オーバレイをクリックした時に閉じるように設定をしています。
タップイベントで、スマホなどでオーバレイをタップした時に閉じるように設定をしています。