ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【javascript】ポップアップウィンドウを作る

 

javascriptでフラットなポップアップウィンドウを作りました。
画像ごとに値を取得して違う画像を表示します。

ボタンのホバーアニメーションも少し練習しました。

ポップアップウィンドウ

f:id:p_and_a_fam:20170319212019p:plain

Demo

HTML(top page)

<!DCOTYPE html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>lightbox</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body id="body">
<div class="container" id="mask">
<p>click and Expand panda.</p>
<div class="box img1" onClick="viewer(1);"></div>
<div class="box img2" onClick="viewer(2);"></div>
<div class="box img3" onClick="viewer(3);"></div>
</div>
<div id="LB">
<div id="LBimg">
</div>
<div id="LBbutton">
</div>
</body>
</html>
</html>

css

@charset "utf-8";
.container{
  position:relative;
  width:620px;
  margin:0 auto;
}
.box{
  float:left;
  cursor:pointer;
  border:2px solid #aaa;
  box-sizing:border-box;
  height:200px;
  width:200px;
}
.box+.box{
  margin-left:10px;
}
.box{
  float:left;
  cursor:pointer;
  border:2px solid #aaa;
  box-sizing:border-box;
  height:200px;
  width:200px;
}
.img1{
  background:url("http://pandafam.hiho.jp/anotherwindow/img.jpg") no-repeat center center/cover #ff8888;
  background-blend-mode:screen;
 }
.img2{
  background:url("http://pandafam.hiho.jp/anotherwindow/img.jpg") no-repeat center center/cover #88ff88;
  background-blend-mode:screen;
 }
.img3{
  background:url("http://pandafam.hiho.jp/anotherwindow/img.jpg") no-repeat center center/cover #8888ff;
  background-blend-mode:screen;
 }
 /*button*/
.button,.button::after{
  transition:top .3s,background .8s;
  cursor:pointer;
 }
.button{
  color: #000;
  border: 1px solid #333;
  box-sizing: border-box;
  text-align: center;
  line-height:30px;
  width: 150px;
  position: relative;
  z-index: 2;
  overflow:hidden;
  margin:0 auto;
}
.button::after{
  position: absolute;
  display: block;
  content: '';
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index:-1;
}
.button:hover{
  color:white;
}
.button:hover::after{
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  background: #444;
  width: 100%;
  height: 100%;
  z-index:-1;
}
 /*light box*/
 .lightbox{
  text-align:center;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid #888;
  height:500px;
  width:500px;
  margin: auto;
 }
 .lightbox img{
  height:300px;
  width:300px;
  margin-bottom:45px;
 }
.lightbox p{
  font-style:italic;
  background:RGBA(142, 142, 142, 0.59);
  padding:10px;
  margin:0 0 45px;
  cursor:pointer;
}

javascript

function viewer(x){
  document.getElementById("mask").style.opacity="0.2";
  
  document.getElementById("LB").style.display="block";
  document.getElementById("LB").classList.add("lightbox");
  var pandaimg='<p>nihao,im panda.</p><img src="http://pandafam.hiho.jp/anotherwindow/img0'+x+'.jpg">';
  document.getElementById("LBimg").innerHTML=pandaimg;
  var Button='<div class="button" onClick="LBclose();">再見(;_;)</div>';
  document.getElementById("LBbutton").innerHTML=Button;
  }
function LBclose(){
  document.getElementById("mask").style.opacity="1";
  document.getElementById("LB").style.display="none";