Pop up Window with HTML5 & CSS3
Pop up Window means a window that suddenly appears (pops up) when you select an option with a mouse or press a special function key.For creating a Popup Window with HTML5 & CSS3, use the following css and html code to create a simple css3 popup box. copy and paste the code to html file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.code360network.com</title>
<style>
.overlay {
position: fixed; z-index:10000;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin:150px auto;
padding: 20px;
background: #fff;
width: 50%;
position: relative;
transition: all 3s ease-in-out;
}
.popup h2 {
font-family: 'Open Sans', sans-serif; font-size:16px; font-weight:600; color:#8a8a8a; text-transform:uppercase; margin:0 0 5px 0;
}
.popup span {
margin-top: 0;
color:#8a8a8a;font-family: 'Open Sans', sans-serif; font-size:13px; font-weight:400; text-transform:uppercase;
}
.popup .close {
position: absolute;
top: 10px;
right: 20px;
transition: all 200ms;
font-size: 30px;
font-weight: normal;
text-decoration: none;
color: #333; opacity:1;
}
.popup .close:hover {
color: #216ca0;
}
.popup .content {
max-height: 30%;
overflow: auto; padding:5px 0 0 0;
font-family: 'Open Sans', sans-serif; font-size:13px; font-weight:400; color:#8a8a8a;
}
.popup .content ul{ margin:0 0 0 20px;}
.popup .content li{ list-style:outside none disc; margin:0 0 8px 0;}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
<body>
<a href="http://www.creativetweets.com"><img src="http://www.creativetweets.com/wp-content/uploads/2016/07/web-logo-1.png" style="text-align:center; width:auto; display:table; margin:0 auto;"></a>
<p style=" text-align:center;">
Please <a href="#2"><strong>click Here</strong></a> to submit the form if you think you are someone to take notice of but do not fit into any of the positions mentioned above </p>
<!--popup-->
<div id="2" class="overlay">
<div class="popup" style="width:30%;">
<h2>www.code360network.com</h2>
<a class="close" href="#1">×</a>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
<!--popup-->
</body>
</html>
