Difference between revisions of "Age Popup"
From KOP KB
(Created page with "<syntaxhighlight lang="html4strict"> <html> <head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> <script> $(document).ready(functi...") |
|||
| Line 1: | Line 1: | ||
| + | Source:http://www.wikihow.com/Create-a-Simple-CSS-Popup-in-Your-Web-Page | ||
| + | |||
| + | http://knightsofprocrastination.ca/yes.png | ||
| + | |||
| + | http://knightsofprocrastination.ca/no.png | ||
| + | |||
<syntaxhighlight lang="html4strict"> | <syntaxhighlight lang="html4strict"> | ||
<html> | <html> | ||
Revision as of 19:40, 12 November 2014
Source:http://www.wikihow.com/Create-a-Simple-CSS-Popup-in-Your-Web-Page
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
$(document).ready(function(){
$( ".popup_img_yes" ).click(function() {
$( ".popup" ).fadeOut( 1200 );
});
$( ".popup_img_no" ).click(function() {
window.history.back();
});
});
</script>
<style>
.popup{
position:fixed;
width:100%;
height:100%;
left:0px;
right:0px;
top: 0px;
bottom:0px;
background-color:rgba(3,3,3,0.8);
}
.popupWindow{
background-color:white;
margin:0px auto;
width:40%;
min-width:400px;
min-height:300px;
margin-top:12%;
text-align: center;
-moz-border-radius: 50px 50px / 50px 50px;
border-radius: 50px 50px / 50px 50px;
box-shadow: 10px 10px 5px #000;
}
.popup_txt{
font-size:26px;
font-weight:bold;
margin:10px;
padding-top:100px;
color:green;
}
.popup_img{
maring:10px;
}
.popup_img_yes,.popup_img_no{
margin:20px;
}
</style>
</head>
<body>
<div class="popup"> <!-- popup content start || copy this to the end of the file-->
<div class="popupWindow">
<div class="popup_txt">
Are you 18 years of age or older?
</div>
<div class="popup_img">
<img src="yes.png" class="popup_img_yes"/>
<img src="no.png" class="popup_img_no"/>
</div>
</div>
</div> <!-- popup content ends -->
</body>
</html>
