Sumber Kode

CSS Pop UP with Javascript

  • anonymous
  • Dec 16' 13
  • Html
  • 1348
  • 5
  • United States

this source code is sample for pop up menu using css and javascript

 

Javascript file name pop-pasarkode.js

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == "none" ) {	el.style.display = "block";}
	else {el.style.display = "none";}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != "undefined") {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById("blanket");
	blanket.style.height = blanket_height + "px";
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-200;//200 is half popup"s height
	popUpDiv.style.top = popUpDiv_height + "px";
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != "undefined") {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-200;//200 is half popup"s width
	popUpDiv.style.left = window_width + "px";
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle("blanket");
	toggle(windowname);		
}

 


HHTML file name poptes-pasarkode.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Popup with CSS and Javascript - www.pasarkode.com</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="pop-pasarkode.js"></script>
</head>
</head>
<body   onload="popup("popUpDiv")">
<div id="container"><center>
<div align="center"><a href="http://www.pasarkode.com"><H1>PASAR KODE</H1></a>    </div>
  <div id="mainContent">  
<p>This is a demo of how <strong>CSS can be used to create a popup</strong>. The old ways of creating popups by opening a new browser window is no longer a good solution since browsers block popups. </p>
    <p>This page is set to open the popup when it"s loaded (<strong>onload</strong>), and by clicking the link below you can also open the popup (<strong>onclick</strong>), giving you a couple different options to trigger the CSS popup.    </p>
<!--POPUP-->    
    <div id="blanket" style="display:none;"></div>
	<div id="popUpDiv" style="display:none; background-color:#000000">
    	<a href="#" onclick="popup("popUpDiv")" >Click to Close CSS Pop Up</a>
	</div>	
  <a href="#" onclick="popup("popUpDiv")">Click to Test CSS Pop Up</a>
<!-- / POPUP-->        
    <p>&nbsp;</p>
    <p>More more source code in more platform language. </p>
    <p>   <a href="http://pasarkode.com/all.code/" >More Source Code</a></p>
    <!-- end #mainContent --></div>
<!-- end #container --></center></div>
</body>
</html>

 


 

CSS file styles.css

 

@charset "UTF-8";
body {
	font-family:Palatino, Baskerville, Georgia, serif;
	background:#190121;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
 #container {
	width: 780px;  
	background: #FFFFFF;
	margin: 0 auto; 
	font-size:14px;
	
	text-align: left; 
}
#mainContent {
	padding: 0 60px;
	min-height:600px;
	line-height:25px
}

img {border:0px}


/*LINKS*/

#mainContent a:link, #mainContent a:visited {color:#fff; text-decoration:none; font-size:18px; background:#000000; padding:5px; -webkit-border-radius:10px;
-moz-border-radius:10px}
#mainContent a:hover, #mainContent a:active {color:#fff; text-decoration:none; font-size:18px; background:#333333; padding:5px; -webkit-border-radius:10px;
-moz-border-radius:10px}





/*STYLES FOR CSS POPUP*/


#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
	position:absolute;
	/*background:url(pop-back.jpg) no-repeat;*/
	width:400px;
	height:400px;
	border:5px solid #000;
	z-index: 9002;
}

#popUpDiv a {position:relative; top:20px; left:20px}

 

ok finish you can test

Share

  • Tags : css, javascript, pop up
comments powered by Disqus

Kode Terkait

Color Picker



Kategori

Tag Terhubung