« »

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

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

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>

Comment (1)
Write

by silver bullion price, 24/03/2011 10:03 PM
Yey Reply

This is pure awesomeness. Thanks for sharing the popup script.

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

javascriptbank.com javascripton.com gomy.mobi gomymobi.com ChainTutor.com war.money system.money eChainBank.com pornID.net ABP3.com ChatTotal.com XMQV.com YeuNu.com ApexBTC.com CTRCoin.com this.bid choose.exchange index.services CryptoKD.com CreditCard.rip choose.works ZWVQ.com Card.rip CoinHolo.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

23/03/2011
Design Orbus [more]
10,897
1
2
0
5.84 KBytes

JavaScript Simple Awesome Inline Modal Box with CSS3

4/5 2 votes / 10,897 previews / 1 comment 23/03/2011 Like JavaScript popup scripts ever presented on jsB@nk: - ...JavaScript Simple Awesome Inline Modal Box with CSS3 - Simple Awesome Inline Modal Box with CSS3

k0zzb0y

Let's be first member to do this

Simple JavaScript Chat Box with OOP Skill

JavaScript by day

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web