Developer X Tricks
html : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>popup window demo</title>
<!-- Copyrights Ahmed Al Ansaary -->
<link rel="stylesheet" type="text/css" href="popup.css">
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="popup">
<div id="popup_header">
<div class="popup_header_title">popup title</div>
<div class="popup_header_btn" onClick="popup('close');">x</div>
<div class="popup_header_btn" onClick="popup('resize');">+</div>
<div class="popup_header_btn" onClick="popup('minimize');">-</div>
</div>
<div id="popup_content">this is the content of this popup...</div>
</div>
<button onClick="popup('show');">show popup window</button>
</body>
</html>
css : popup.css
/*Copyrights Ahmed Al Ansaary*/
*{
margin: 0px;
padding: 0px;
}
#popup{
width: 0px;
height: 0px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
border: 0;
border-radius: 5px;
box-shadow: 0px 0px 20px #666;
overflow: hidden;
transition: all .5s;
}
#popup_header{
position: absolute;
width: 100%;
height: 25px;
background-color: #666;
top: 0px;
z-index: 6;
overflow: hidden;
cursor: default;
}
.popup_header_btn{
width: 20px;
height: 20px;
margin: 2.5px;
float: right;
background-color: #444;
color: #fff;
text-align: center;
border: 0;
border-radius: 5px;
cursor: default;
z-index: 7;
transition: all .3s;
}
.popup_header_btn:hover{
background-color: #555;
}
.popup_header_title{
margin: 2.5px;
margin-left: 5px;
float: left;
color: #fff;
text-shadow: 1px 1px 5px #333;
}
#popup_content{
position: absolute;
width: 100%;
height: 100%;
padding-top: 25px;
margin: 5px;
z-index: 5;
}
javascript : popup.js
/* Copyrights Ahmed Al Ansaary */
function popup (x) {
var popup = document.getElementById('popup');
switch(x){
case "show":
popup.style.width = "400px";
popup.style.height = "400px";
break;
case "minimize":
popup.style.width = "200px";
popup.style.height = "25px";
break;
case "resize":
if (popup.style.width == "100%") {
popup.style.width = "400px";
popup.style.height = "400px";
popup.style.top = "50%";
popup.style.left = "50%";
popup.style.marginLeft = "-200px";
popup.style.marginTop = "-200px";
break;
} else{
popup.style.width = "100%";
popup.style.height = "100%";
popup.style.top = "0px";
popup.style.left = "0px";
popup.style.marginLeft = "0px";
popup.style.marginTop = "0px";
break;
}
case "close":
popup.style.width = "0px";
popup.style.height = "0px";
break;
}
}
0 comments:
Post a Comment