Â« Â»

Like JavaScript popup scripts ever presented on jsB@nk:

- GreyBox: Cool HTML/JavaScript/AJAX/Flash Window Popup
- DIV Layer Popup onClick
- Inner Popup with Cookie
- Always on Top Popup

However this JavaScript code example is simpler to make an inner popup. Tallying with simple layouts of web design or you would not like to edit/use a lot of JavaScript code examples on the web pages.

Label: JavaScript popup window, popup in JavaScript, JavaScript popup HTML, JavaScript DIV popup, JavaScript popup box, JavaScript modal window, JavaScript modal dialog, modal JavaScript popup, JavaScript modal box, JavaScript modal DIV, modal popup window, CSS3

For the best in Cable TV, High Speed Internet & Home Phone Service order Comcast Deals and save money.

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
#popup{	
z-index+999999;
position:absolute;
left:400px;
top:200px;
padding:10px;
display:none;
width:400px;
height:200px;
background: #FFFFFF;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}
.tit{
width:98%;
height:20px;
padding:5px;
background:#3654A8;
}
</style>

Copy All x2

<script type="text/javascript" language="JavaScript">
function ShowHide(divId)
{
	if(document.getElementById(divId).style.display == 'none')
	{
	 document.getElementById(divId).style.display='block';
	 document.bgColor="silver" ;
	}
	else
	{ 
	 document.getElementById(divId).style.display = 'none';
	 document.bgColor="#FFFFFF" ;
	}
}
</script>

Copy All x2

<div class="body">
		
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim volutpat sem ac scelerisque. Cras non rutrum lorem. Duis lacinia quam at leo ultrices commodo. Ut eget urna feugiat odio lobortis condimentum. Donec ultrices eros id mi bibendum feugiat. Vestibulum augue eros, ultrices id viverra at, euismod sed neque. Pellentesque non magna vitae velit venenatis condimentum. Phasellus eleifend tristique odio eget posuere. Nulla lacinia molestie quam at luctus. Vestibulum non lorem velit.</p>
				
	<p>Nulla venenatis pretium urna. Suspendisse nisl orci, congue a gravida a, ornare id ipsum. Duis sapien nulla, congue id dictum eget, sollicitudin non nisi. Integer congue dictum augue ac fermentum. Etiam nec semper dui. Pellentesque rutrum lobortis neque in imperdiet. Donec ut lacus felis, id scelerisque nisi. Maecenas lacus erat, cursus nec facilisis non, aliquet ut felis. Aenean <a href="javascript:void(0);" onclick="return ShowHide('popup');"><b>Click Here for PopUp</b></a>. Nam sit amet magna in quam cursus porttitor. Maecenas laoreet blandit tellus, at volutpat turpis suscipit et. Maecenas tempus convallis magna. Vivamus venenatis dolor quis ligula laoreet tristique. Praesent euismod porttitor ligula, vitae iaculis quam faucibus non. Sed sagittis ullamcorper erat vel porttitor.</p>
				
	<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla hendrerit. Quisque condimentum vestibulum cursus. Pellentesque vehicula commodo nisl, quis blandit tortor consequat sed. Praesent sed orci nisl. Donec id justo eu elit elementum convallis ac at metus. Nam quis erat ut lorem facilisis eleifend. Phasellus et velit sed nulla sodales blandit quis sed massa. Praesent suscipit auctor luctus. Praesent eleifend, est sit amet vestibulum placerat, mi erat placerat arcu, non luctus enim tellus a felis. Sed sed sapien dolor. Nulla vestibulum mattis ante, in convallis mauris tempor nec. Proin aliquam arcu eu orci luctus adipiscing. Etiam pulvinar, justo sed volutpat mattis, erat purus gravida sem, vitae pretium eros velit sit amet dolor. </p>
	
	</div>
	<div id="popup">

		<div class="tit">Your Title </div>
		<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla </p>
		<a href="javascript:void(0);" onclick="return ShowHide('popup');">Close</a>
	</div>