機能説明などで、一時的に見られるウインドーがあると便利ですよね。
そこで、html内にスタイルシート(css)を使ったポップアップウインドーを見つけました。
それに手を加えジャバスクリプト(javascript)で表示位置を変えたのを、紹介します。
特徴としてはちょっとしたテキストを確認したり、コピペして使える。要らない時は消して置いたり邪魔になったら場所を変える。
htmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pop UP Window</title>
<link rel="stylesheet" href="popupw_css.css">
<script src="popupw_js.js" defer></script>
</head>
<body>
<h1 align="center">Pop UP Window</h1>
「アドバイザー・にゃんこ」<br>
<label class="my_1">
<span class="my_1">popupを表示</span>
<input type="checkbox" name="checkbox" class="my_1" onclick="chk1();">
<div id="popup">
<img src="imge\kohacu.com_samune_000576.png" class="my_1" alt="ねこ">
<input type="checkbox" name="checkbox2" id="my_11" onclick="chk2();">上に置く<br>
<span style="color: #fff;">二行目</span><br>長いのを書いていくとどうなるのかと言うと端で折り返されるはずである。
</div>
</label>
<br><br><br><br><br><br>
</body>
</html>
cssスタイルシート(popupw_css.css)
@charset "UTF-8";
/* ver_1_00 */
body {
margin: 0.8cm;
background:#358fe2;
}
/*popup表示させたいコンテンツのレイアウトと位置*/
#popup {
width: 250px;
/* line-height: 100px;*/
background: #000;
padding: 10px 10px;
vertical-align: text-top;
box-sizing: border-box;
display: none;
position: fixed;
top: 50%;
/* left: 50%;*/
-webkit-transform: translate (-50%, -50%);
transform: translate (-50%, -50%);
}
img.my_1 {
width:100%;
}
label.my_1 {
display:block;
color: #01b6ed;
}
/*ボタンの装飾*/
label.my_1 span.my_1 {
display: block;
background-color: #01b6ed;
color: #fff;
width: 200px;
line-height: 40px;
border-radius: 4px;
text-align: center;
}
label.my_1 span.my_1:hover {
cursor: pointer;
}
input.my_1[type="checkbox"] {
display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input.my_1[type="checkbox"]:checked + #popup {
display:block;
}
javascriptジャバスクリプト(popupw_js.js)
// ver1_00
/* stylsyto 変更 */
let my_width = document.documentElement.clientWidth;
let myNewWidth = my_width - 250 //styleで横幅を250pxと指定しているから
document.querySelector('#popup').style.left = `${myNewWidth}px`;
/* */
function chk1() {
my_width = document.documentElement.clientWidth;
myNewWidth = my_width - 250
document.querySelector('#popup').style.left = `${myNewWidth}px`;
}
function chk2() {
let myelement = document.getElementsByName('checkbox2');
if (myelement[0].checked == true){
document.querySelector('#popup').style.top = '0';
}else{
document.querySelector('#popup').style.top = '50%';
}
}
良い日々をお過ごしください。
