asked on

layer popup with background "dimming"

Hi!

I wish to have a popup with background dimming - like on this page:
http://www.sitepoint.com/article/style-web-forms-css
[ on that page, to see what i mean, click the link: 1166_image1 (click to view image) or the image associated with it ]

i would like to see the shortest and smoothest/best method possible ( code please )

Thank you

Roonaan

The scripts are commonly known as "lightbox" scripts. There are different implementations, standalone or based on libraries as scriptacolous, prototype or other rich internet frameworks.
Are you already using javascript libraries, or do you prefer a "standalone" lightbox script?

Kind regards

-r-

Kokoglen

Using a library like jQuery makes this very easy.
http://www.malsup.com/jquery/block/#page

Once you include jQuery and the plugin, the code would be:
$.blockUI();

Pretty short. Plus you can do all kinds of other fancy things. Check the demos.

b0lsc0tt

eNarc,

A simple example of this is in the page below. It does not need any other frameworks, etc. If you want to get fancier then lightbox and jQuery, etc are what you should look at.

Let me know if you have any questions or need more information.

b0lsc0tt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<link href="../style.css" rel="stylesheet" type="text/css" />
<title>The page</title>
<style type="text/css">
div {
	margin: 10px auto;
}
#links {
	color: red;
}
</style>
<script type="text/javascript">
function doForm() {
	document.getElementById('formDiv').style.zIndex = "100";
	document.getElementById('formDiv').style.display = "";
	document.getElementById('body').style.backgroundColor = "#303030";
	document.getElementById('button1').style.visibility = "hidden";
}
function clearForm(frm) {
	frm.title1.value = '';
	frm.protocol.options[0].selected = true;
	frm.link1.value = '';
	frm.desc1.value = '';
}
function quitForm(frm) {
	document.getElementById('formDiv').style.zIndex = "-1";
	document.getElementById('formDiv').style.display = "none";
	document.getElementById('body').style.backgroundColor = "white";
	document.getElementById('button1').style.visibility = "visible";
	clearForm(frm);
}
function buildForm(frm) {
	if (frm.title1.value != '' && frm.link1.value != '' && frm.desc1.value != '') {
		var str = "title=" + frm.title1.value;
		str += "&proto=" + frm.protocol.value;
		str += "&link=" + frm.link1.value;
		str += "&desc=" + frm.desc1.value;
		return str;
//		alert(str); // for testing
//		return false;
	} else return false;
}
function sendForm(obj) {
	var xmlHttp = null;
	var cont = document.getElementById('links');
	var frmInfo = buildForm(obj);
	if (!frmInfo) {
		alert("No form info");
		return false;
	}
	xmlHttp = GetXmlHttpObject(stateChanged);
	xmlHttp.open("POST", "form_popup_ajax.php", false);
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
	xmlHttp.send(frmInfo);
	cont.innerHTML += xmlHttp.responseText;
	quitForm(obj);
}
function GetXmlHttpObject(handler) {
	var objXmlHttp=null;
	try	{  // Firefox, Opera 8.0+, Safari
		objXmlHttp=new XMLHttpRequest();
		objXmlHttp.onreadystatechange=handler
		objXmlHttp.onload=handler
		objXmlHttp.onerror=handler
	}
	catch (e) {  // Internet Explorer
		try {
			objXmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			objXmlHttp.onreadystatechange=handler
		}
		catch (e) {
			objXmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			objXmlHttp.onreadystatechange=handler
		}
	}
	return objXmlHttp;
}
function stateChanged() {
	try {
		if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
			return xmlHttp.responseText;
		}
	}
	catch (e) {
	}
}
</script>
</head> 
<body id="body" style="margin: 25px 115px;">
<h3>My page</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
<div id="links"></div>
<br /><br />
<div style="width: 25%; margin: 0 auto;">
<button id="button1" onclick="doForm();">Show Form</button>
</div>
<div id="formDiv" style="width: 60%; margin: 0 auto; padding: 10px; background-color: #ccff99; text-align: center; z-index: -1; position: absolute; top: 50px; left: 150px; border: solid 1px gray; font-weight: bold; display: none;">
<h3>AJAX Javascript Popup Form</h3>
<form name="form1" action="" method="post">
Title: <input type="text" name="title1" size="65" /><br /><br />
Protocol: 
<select name="protocol">
<option value="http://">http://</option>
<option value="https://">https://</option>
<option value="ftp://">ftp://</option>
</select>
Link: <input type="text" name="link1" size="45" /><br /><br />
Description: <input type="text" name="desc1" size="55" /><br /><br /><br />
<input type="button" name="submit" value="Submit" onclick="sendForm(this.form);" />&nbsp;&nbsp;&nbsp;
<input type="button" name="reset" value="Quit" onclick="quitForm(this.form);" />
</form>
<br /><br />
</div>
</body>
</html>

Open in new window

eNarc

ASKER

thank you for replying guys

ya Sage, I'm looking for the simplest and smoothest standalone version ( i dont like, or need bulked up libraries ).
Is there any shorter code than what you posted - seems to me that there's alot of redundant code in there?

Kokoglen

The reason the libraries exist is to smooth over lots of cross-browser problems. Doing a fade like this sometimes acts funny in different browsers.
A smaller version of the effect: http://docs.jquery.com/Plugins/dimScreen#Code

You can look at the code and see what it's doing. Gzipped, this code + jquery = 15k. Not that bulky.

But I understand if you want to go solo.

b0lsc0tt

That page was part of an "app" so there was some extra stuff. I have removed it and the script is now just for showing and clearing the "popup."

Let me know if you have a question or need more info.

bol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../style.css" rel="stylesheet" type="text/css" />
<title>The page</title>
<style type="text/css">
div {
	margin: 10px auto;
}
#links {
	color: red;
}
</style>
<script type="text/javascript">
function doForm() {
	document.getElementById('formDiv').style.zIndex = "100";
	document.getElementById('formDiv').style.display = "";
	document.getElementById('body').style.backgroundColor = "#303030";
	document.getElementById('button1').style.visibility = "hidden";
}
function clearForm(frm) {
	frm.title1.value = '';
	frm.protocol.options[0].selected = true;
	frm.link1.value = '';
	frm.desc1.value = '';
}
function quitForm(frm) {
	document.getElementById('formDiv').style.zIndex = "-1";
	document.getElementById('formDiv').style.display = "none";
	document.getElementById('body').style.backgroundColor = "white";
	document.getElementById('button1').style.visibility = "visible";
	clearForm(frm);
}
</script>
</head>
 
<body id="body" style="margin: 25px 115px;">
<h3>My page</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
<div id="links"></div>
<br /><br />
<div style="width: 25%; margin: 0 auto;">
<button id="button1" onclick="doForm();">Show Form</button>
</div>
<div id="formDiv" style="width: 60%; margin: 0 auto; padding: 10px; background-color: #ccff99; text-align: center; z-index: -1; position: absolute; top: 50px; left: 150px; border: solid 1px gray; font-weight: bold; display: none;">
<h3>AJAX Javascript Popup Form</h3>
<form name="form1" action="" method="post">
Title: <input type="text" name="title1" size="65" /><br /><br />
Protocol: 
<select name="protocol">
<option value="http://">http://</option>
<option value="https://">https://</option>
<option value="ftp://">ftp://</option>
</select>
Link: <input type="text" name="link1" size="45" /><br /><br />
Description: <input type="text" name="desc1" size="55" /><br /><br /><br />
<input type="button" name="reset" value="Quit" onclick="quitForm(this.form);" />
</form>
<br /><br />
</div>
</body>
</html>

Open in new window

b0lsc0tt

eNarc,

The code I have provided and that simple example is well tested in current browsers (definitely IE6 & 7 and Firefox on PC) if I remember right. It is basic though and if you want effects like fade and to easily change the look, etc then you may want to consider those other good suggestions (by the other experts). Especially if you want a "plug and play" type solution. This type of effect looks nice but since it mixes script and complicated style (CSS) it can be difficult to get the right mix. I hope the example I provide is close to what you want because then you should be able to pretty much use that code with minor changes for content.

bol

eNarc

ASKER

Thank you Sage, it's what I'm looking for, the only problem is, it changes just the background color so all images and everything else on the page shows up with full transparency and in their original color. How can we fix that?

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

eNarc

ASKER

Thank you Sage,

there are still some problems with it - for instance my flash buttons show through unaffected.
also, i now get both horizontal and vertical scrollers whenever i open the box

b0lsc0tt

Those types of specific can be adjusted like I described in my last comment with the exception of the Flash items. Those can be harder to hide although I have seen scripts or solutions that supposedly do it. This seems to becoming a new issue though, maybe even a couple of new questions. If your page has Flash and other complex elements/parts then the solution will be much more complex. I don't mind helping on these parts in other questions but if you want a one-step type solution then you might try some of the premade ones. Make sure you check to see if Flash willl be handled though since that is a real unique thing.

Let me know how this helps or if you have a question.

bol

eNarc

ASKER

thank you all :]

b0lsc0tt

Your welcome! I'm glad I could help. Thanks for the grade, the points and the fun question.

bol

layer popup with background &quot;dimming&quot;

layer popup with background "dimming"