Javascript, CSS page control problem!

sois

Is it possible to have a javascript/css link that:
1. Creates a popup
2. Put a grey overlay on page it was created from (optional)
3. The popup will have a form with information. Submit the form, close the popup, refresh the original page.
4. remove the grey overlay.

I think I can do #1 😉
The main issue I want to tackle is #3. Is that even possible? Thanks!

bradgrafelman

Well, I knew that PHPBuilder did something like this (click the "Log Out" link at the top) but I couldn't figure out why my sample script didn't work! Then I figured it out: DOCTYPE declaration.

Try this out.. and make sure you have the same DOCTYPE declaration... IE didn't work without it, and I don't know if other DOCTYPEs support the M$ image transitions or what:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function restoreMain() {
	ht = document.getElementsByTagName("html");
	ht[0].style.filter = "";
}
function openWindow() {
	ht = document.getElementsByTagName("html");
	ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
	var popUp = window.open('/phpinfo.php', 'popUp', 'location=0,status=0,width=500,height=500');
	popUp.document.body.onunload = restoreMain;

}
</script>
</head>
<body>
<p><a href="#" onclick="openWindow()">test</a> me!</p>
</body>
</html>

Weedpacket

I don't which other browsers support Microsoft ActiveX components.... let alone other operating systems....

There was something in this forum earlier about opacity - including the Microsoft method. Have a full-page <div> that's normally hidden; give it a partially-transparent background. Either (ideally) using a colour and opacity or a half-transparent halftone image (2x2 pixels). When you want to bring up the box, change the <div>'s visibility. When done, change the <div>' visibility back to hidden.

For style points, the form could be in the <div> as well, instead of a popup, and use a spiffy Ajax transaction to do the submission.

Ichiro

For opacity;

var opacity = 100; // Reduce this to make the element more transparent.
var element = document.getElementById('some_element');

element.opacity = opacity/100; // For non-IE
element.style.filter = 'alpha(opacity='+opacity+')'; // For IE

sois

Weedpacket wrote:
I don't which other browsers support Microsoft ActiveX components.... let alone other operating systems....

There was something in this forum earlier about opacity - including the Microsoft method. Have a full-page <div> that's normally hidden; give it a partially-transparent background. Either (ideally) using a colour and opacity or a half-transparent halftone image (2x2 pixels). When you want to bring up the box, change the <div>'s visibility. When done, change the <div>' visibility back to hidden.

For style points, the form could be in the <div> as well, instead of a popup, and use a spiffy Ajax transaction to do the submission.

I wish I was awesome enough to do an ajax transaction!!!

Ichiro

Don't let 'AJAX' scare you. It's trivial to do especially with all the examples and tutorials around.

Trivial to do but not so easy to get right although, one has to start somewhere.

Doing AJAX, by itself, is not awesome and unfortunately more often than not, done badly, but AJAX done well, now THAT'S awesome! 😉

You can tell an awesome use of AJAX when you see an application that is AJAX 'enhanced' as opposed to AJAX dependant.

Turn Javscript off and if the application still works, I am impressed, if Javscript has to be on for the core functionality to work, yawn. 😃

My rule of thumb regarding the use of Javascript in general, and I use Javascript a LOT, if the same core functionality isn't available with or without Javscript enabled, one would be best to look for a different solution or consider whether or not one is only adding a buzzer, whistle or bell that will be interesting for all of 2 seconds and one could do well without.

For what it may or may not be worth. 😉