create Simple Custom DHTML POPUP


Follow the simple steps to achieve the popup, no use of prototype, moofx and other prototypes available on the net.

I have taken reference from Little Boxes in order to create the box centered for IE and firefox.

Step 1
Create style sheet – save the below content as “fxpopup.css”

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	/* specify your background color here */
	background-color: #FFF;
	}
p {
	font-size: 12px;
	line-height: 12px;
	}
.tiny {
	font-size: 9px;
	line-height: 16px;
	margin-top: 15px;
	margin-bottom: 5px;
	}
#rt{
	float: right;
	margin-right: 10px;
}
#rt a{
	color: #CCCCCC;
	text-decoration: none;
}
#rt a:hover{
	text-decoration: none;
	color: #FFFFFF;
}

#top {
	padding: 1px;
	border: 1px solid #ccc;
	background: #666;
	height: 20px; /* ie5win fudge begins */
	height: 20px;
	margin-right: auto;
	margin-left: auto;
	}
html>body #top {
	height: 20px; /* ie5win fudge ends */
	}
#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 0px solid #FFFFFF;
	width: 150px;
	width: 120px;
	}
html>body #left {
	width: 120px;
	}
.gecko #middle{
	width: 700px;
}
.ie  #middle{

}
#middle {
	padding: 1px;
	border: 5px solid #ccc;
	background: #666;
	margin-right: auto;
	margin-left: auto;	

	}
#right {
	position: absolute;
	top: 120px;
	right: 0px; 	margin: 20px;
	padding: 10px;
	border: 0px solid #FFFFFF;
	width: 150px;
	width: 120px;

	}
html>body #right {
	width: 120px;	}
pre {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 10px;
	}
#info{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #FFFFFF;
	text-decoration: none;
	float: left;
}
#overlay{
	position: absolute;
	z-index:90;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	min-height:100%;
	background-color:#000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	display: none;
}

#popcontent{
	position: absolute;
	z-index:100;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display:none;
}

Step 2
Creating the HTML content

Import the fxpopup.css

Step 3
Place the below code after the <body> tag

<div id=”overlay”></div>
<div id=”popcontent”>
<div id=”top”>
<div id=”info”></div>
<div id=”rt”><a href=”#” class=”tiny” onclick=”parent.closeme();”>X</a>
</div>
</div>
<div id=”left”></div>
<div id=”middle”>
<pre>
</pre>
<div align=”right”></div>
</div>
<div id=”right”></div></div>

Step 4
Create the JavaScript – save the below code as fxpopup.js

document.getElementById(‘middle’).innerHTML =”<iframe align=\”top\” frameborder=\”0\” scrolling=\”auto\” width=\”100%\” height=\”400\” name=\”ifr\” id=\”ifr\” ></iframe>”
var IFrameObj;
IFrameObj = frames[‘ifr’];

function openpopup(url,w,h,heading){
document.getElementById(‘overlay’).style.display =’block’;
document.getElementById(‘popcontent’).style.display =’block’;
document.getElementById(‘top’).style.width = w +8+”px”
document.getElementById(‘middle’).style.width = w+”px”
document.getElementById(‘middle’).style.height = h+”px”
document.getElementById(‘ifr’).style.height = h+”px”
document.getElementById(‘info’).innerHTML = heading;
IFrameObj.location.href=(url);
}
function closeme(){
document.getElementById(‘overlay’).style.display =’none’;
document.getElementById(‘popcontent’).style.display =’none’;
}
// usage instruction – openpopup(url,width,height,heading);
//openpopup(urle,800,700,’Page Heading’);

Step 4 – calling the popup function on the a hyperlink
<a href=”#” onclick=”openpopup(‘yourpopuppage.html’,800,500,’your title’)”;>popup link</a>

You are done
Popup tested on IE7 and firefox 1.5.0.6

Ensure to call the css and js

call the js file at the end of the page.

Here is the link to the working sample as a zip file

Technorati: , , , , , ,

tags: , , , , ,

Advertisements

6 thoughts on “create Simple Custom DHTML POPUP

  1. Thanks for the “simple” explanation with no working example. How does a moron like you survive in life? The popup you refer to on your page is not done the way you describe in your “simple steps” – The code you provide doesn’t work.

  2. Sorry about that,
    My template seems to mess up with the double quotes and the single quotes.
    Kindly look for the working sample mentioned in the post.
    HTH

  3. XRumer Platinum Edition is the perfect program for advertisement!
    It’s have CAPTCHA recognizer, email verificator, and a lot of other functions…

    But. I forgot link to it 😦

    Can you give me URL to the xrumer description? screenshots, etc.

    Thanks

  4. Thanks!! It works.

    Any idea why the div let the underlaying form elements (esp. SELECT tag) see thru??

    i.e if you have one SELECT tag on one div/page and another DIV is overlapping this, the element is still visible – whereas other elements (BUTTON/TExT) are not.

  5. Hi Vijay:
    The work around would be Javascript by identifying the form elements to be made hidden while the DHTML popup is visible. Kind of toggle button to switch on and off the form elements.

    Hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s