• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4369
  • Last Modified:

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
0
eNarc
Asked:
eNarc
  • 6
  • 4
  • 2
  • +1
1 Solution
 
RoonaanCommented:
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-
0
 
KokoglenCommented:
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.
0
 
b0lsc0ttIT ManagerCommented:
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

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
eNarcAuthor Commented:
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?
0
 
KokoglenCommented:
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.

0
 
b0lsc0ttIT ManagerCommented:
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

0
 
b0lsc0ttIT ManagerCommented:
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
0
 
eNarcAuthor Commented:
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?
0
 
b0lsc0ttIT ManagerCommented:
The reason for that is the popup form doesn't fill the page.  The script just changes the background.  If you want to cover everything then the div needs to fill the page.

In my code this can be simply done by making the changes below to the div.  The height part is the most difficult.  If you want to "clean it up" then you can use script to calculate the browser height but that script is complex.  You need different steps for different browsers.  If you want to cover a known amount of area then just use the top, left, width, and height to do it.

Let me know if you have a question.

bol
<div id="formDiv" style="width: 100%; height: 100%; margin: 0 auto; padding: 10px; background-color: #ccff99; text-align: center; z-index: -1; position: absolute; top: 0px; left: 0px; border: solid 1px gray; font-weight: bold; display: none;">

Open in new window

0
 
eNarcAuthor Commented:
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
0
 
b0lsc0ttIT ManagerCommented:
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
0
 
eNarcAuthor Commented:
thank you all :]
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now