ポップアップ領域を表示するコードを紹介します。
概要
ポップアップ領域を表示する場合、CSSのpositionプロパティで absolute を指定し、visibility プロパティを "hidden" に設定します。
ポップアップ領域を表示する際は、visibility プロパティを "visilbe" に設定し、ポップアップ領域を表示する座標値を設定します。
実装例
コード
.PopupFrame{
width:360px;
height:240px;
background-color:#a0d3f7;
position:absolute;
visibility:hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimplePopup.css" />
<script type="text/javascript">
function OnLinkClick() {
var linkelem = document.getElementById("PopupLink1");
var clientRect = linkelem.getBoundingClientRect();
var elem = document.getElementById("PopupFrame1");
elem.style.visibility = "visible";
elem.style.left = clientRect.left + "px";
elem.style.top = clientRect.top + "px";;
}
function OnCloseLinkClick() {
var elem = document.getElementById("PopupFrame1");
elem.style.visibility = "hidden";
}
</script>
</head>
<body>
<p>段落1です。ABCDE</p>
<p>段落2です。ABCDE</p>
<p>段落3です。ABCDE</p>
<p>段落4です。ABCDE</p>
<p>段落5です。ABCDE</p>
<p><a id="PopupLink1" href="javascript:OnLinkClick();">Popup表示</a></p>
<p>段落6です。ABCDE</p>
<p>段落7です。ABCDE</p>
<p>段落8です。ABCDE</p>
<p>段落9です。ABCDE</p>
<p>段落10です。ABCDE</p>
<div id="PopupFrame1" class="PopupFrame">ポップアップ枠です。<a href="javascript:OnCloseLinkClick();">close</a></div>
</body>
</html>
解説
[Popup表示]リンクをクリックすると下図のJavaScirptコードを実行します。
ポップアップ領域の要素 "PopupFrame1" の要素を取得し、visibility プロパティを "visible" に設定します。
left, top の座標値はクリックしたリンクの "PopupLink1" の要素の top, left の座標を利用します。
リンクの位置にポップアップ領域が表示される動作になります。
function OnLinkClick() {
var linkelem = document.getElementById("PopupLink1");
var clientRect = linkelem.getBoundingClientRect();
var elem = document.getElementById("PopupFrame1");
elem.style.visibility = "visible";
elem.style.left = clientRect.left + "px";
elem.style.top = clientRect.top + "px";;
}
ポップアップ領域の[Close]リンクをクリックした場合は下記のJavScriptコードを実行します。
"PopupFrame1" の要素を取得し、visibility プロパティを "hidden" に設定し、ポップアップ領域を非表示にします。
function OnCloseLinkClick() {
var elem = document.getElementById("PopupFrame1");
elem.style.visibility = "hidden";
}
表示結果
上記HTMLファイルをWebブラウザで表示します。下図のページが表示されます。ページ内の[Popup表示]リンクをクリックします。
リンクをクリックすると水色のポップアップ枠が表示されます。枠の表示位置はクリックした[Popup表示]のリンク位置になります。
ポップアップ枠はコンテンツの上に覆いかぶさる表示になるため、背後のリンクや段落の文字列はポップアップ枠に隠されます。
ポップアップ表示された水色の枠の[close]リンクをクリックします。ポップアップ枠が閉じられます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-02-03
作成日: 2021-02-03
