ポップアップ（Popup）を自作する方法
Contents
ポップアップ（Popup）を自作する方法
今回はポップアップを作ってみます。基本的にはすぐには消えないツールチップという感じですね。
サンプル
-
デフォルト ポップアップ
- 上部 ポップアップ
- 下部 ポップアップ
- 左側 ポップアップ
- 右側 ポップアップ
- リンク ポップアップ
-
DIV領域 ポップアップ
-
画像
ポップアップ
デモ
実装方法
スタイルシート定義
<style type="text/css">
/* ポップアップの定義 */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ポップアップテキストの定義 */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #111;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
}
/* 上部表示 */
.popup .popuptext-top {
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* 矢印の定義 */
.popup .popuptext-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* 下部表示 */
.popup .popuptext-bottom {
top: 150%;
left: 50%;
margin-left: -60px;
}
/* 矢印の定義 */
.popup .popuptext-bottom::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
/* 右側表示 */
.popup .popuptext-right {
top: -5px;
left: 110%;
}
/* 矢印の定義 */
.popup .popuptext-right::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
/* 左側表示 */
.popup .popuptext-left {
top: -5px;
right: 110%;
}
.popup .popuptext-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
/* ポップアップ表示定義 */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* フェードイン効果定義 */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>まず、スタイルシート定義をします。
HTMLマークアップ
まず、ポップアップを設定したいオブジェクトを準備します。ここではリンク（アンカータグ）とします。
<a class="popup" href="#">リンク
...
</a>ポップアップを設定したいオブジェクトに、CSSクラス「popup」を設定します。
次にポップアップに設定するテキスト文字列ををその対象オブジェクト内に設定します。
<a class="popup" href="#">リンク
<span class="popuptext">ポップアップ</span>
</a>ポップアップを設定したいオブジェクト内にspanタグで文字列を設定します。その際、spanタグのCSSクラスとして「popuptext」クラスを適用してください
画像（img）にツールチップを適用するには？
このCSSクラスでは、画像（img）には、ポップアップを適用できません。imgタグ内にspanタグを定義できないからです。その場合の回避策としては、imgタグをdivタグなどで囲い、その中にツールチップテキストを定義すれば、対応できるかと思います。
<div class="popup">
<img src="(画像URI)" />
<span class="popuptext">ツールチップ</span>
</div>イベント設定
最後、対象オブジェクトをクリックしたときにポップアップを表示させるようにイベントを設定します。
<script type="text/javascript">
/* ポップアップテキストイベント設定 */
var targetList = document.querySelectorAll(".popup");
targetList.forEach((target) => {
setEvent(target);
});
/* クリックイベントを設定 */
function setEvent(target) {
target.addEventListener("click", function() {
var popupText = target.querySelector(".popuptext");
popupText.classList.toggle("show");
});
}
</script>CSSクラス「popup」が設定されているエレメントを一括取得し、１件ごとに、その配下にある「popuptext」が設定されているエレメントに対し、クリック時表示または非表示（’show’クラスの設定、または、削除）をするようにしています。
これで、クリック時、ポップアップ表示、再クリック時、ポップアップを非表示させることができます。
ポップアップ配置
デフォルトのポップアップ定義「popup」クラス以外に、ポップアップの配置位置を定義したクラスも用意してあります。
上部表示
クラス「popuptext-top」を適用すると上部にツールチップが表示されます。
<span class="popup">上部
<span class="popuptext popuptext-top">ポップアップ</span>
</span>下部表示
クラス「popuptext-bottom」を適用すると下部にツールチップが表示されます。
<span class="popup">下部
<span class="popuptext popuptext-bottom">ポップアップ</span>
</span>左側表示
クラス「popuptext-left」を適用すると左側にツールチップが表示されます。
<span class="popup">左側
<span class="popuptext popuptext-left">ポップアップ</span>
</span>右側表示
クラス「popuptext-right」を適用すると左側にツールチップが表示されます。
<span class="popup">右側
<span class="popuptext popuptext-right">ポップアップ</span>
</span>ご参考
参考ページ
この記事を作成するにあたり以下のページを参考にしました。
