Forum Moderators: not2easy
1) I've seen pages where a link or button is clicked and then the whole page gets a gray haze over it and a box pops up on the page (not in a new window). When this happens, you can only use the box that popped up and you cannot click on any part of the page that has the gray haze over it. This has probably been asked before but i don't really know what to call it to be able to type it into a search engine.
2) I've seen this on facebook - when your mouse hovers over a section of your profile (personal info, education info, contact info, etc), there is a little "Edit" link that appears in the upper right hand corner of that section. Then, when you hover over that, it gets darker.
If anyone can tell me how this is done, I would greatly appreciate it!
Thank you!
You need things like javascript to help you.
Once you have the added elements by that script: they can be positioned using CSS and can be made to be in front of other elements on your page, to be translucent (depends a bit on the abilities of the browser), to fill the viewport, etc.
But your initial angle has to be javascript, not CSS.
<body onunload="script(arguments)">
I would seriously reconsider against this, many users find these predatory and annoying.
2) Facebook uses a lot of scripts, the darkening of "edit" is a normal a:hover event. The appearance is likely onmouseover="script(arguments)" which makes an invisible element visible, or a absolute positioned element placed on screen (instead of hidden with a negative margin).
The onmouseover event is not much different than a drop down menu, you may want to look up those.
But both of these issues are Javascript, marginally CSS.
I figured that someone might have had an example page they can point me to.
Thanks again!
Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5); /* CSS3 */
}
#overlay img {
position: absolute;
display: block;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 150px;
}
#overlay p {
text-align: right;
}
</style>
</head>
<body>
<p>Normal content <a href="#">link</a>.</p>
<div id="overlay">
<p>overlay <a href="#">link</a>.</p>
<img src="1.jpg" alt="mandatory" />
</div>
</body>
</html>
Add some javascript to hide the overlay and/or make it appear and you're set.
I didn't bother testing it in IE (I'm using a CSS3 background color so it'll not work unchanged in any of them anyway), and well IE6 really isn't up to this unaided (I'd start with IE7.js for that one).
For IE6: take care with forms I doubt they'll actually hide under the div in "that" browser.
POC:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
html, body {padding: 0; margin: 0;}
.overlay {
position: absolute;
top: 0;
left: -9999px; /* hide off screen until :target brings it back */
width: 100%;height: 100%;
background-color: #eee; /* or make semi transparent background repeating gif */
}
.content {
background: #fff;
position: absolute;
top: 25%;
left: 25%;
height: 50%;
width: 50%;
}
.close {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #000;
color: #fff;
text-align: right;
}.close a {font-weight: bold; color: #fff; font-size: 20px; padding: 5px 20px;}
#popup:target {left: 0;}
</style><!--[if lt IE 9]>
<style type="text/css" media="screen">
/* rule that mimics #popup:target once the class
has been added via the function at the bottom */
.istarget {left: 0;}
</style>
<![endif]-->
</head>
<body>
<p id="p1" class="pop">Normal content <a href="#popup">link</a></p>
<div class="overlay" id="popup">
<div class="content">
<div>put img or content in here</div>
<span class="close">Click cross to close <a href="#p1">X</a></span>
</div>
</div><!--[if lt IE 9]>
<script type="text/javascript">
$(document).ready(function(){
$(".pop a").click(function(){
$("#popup").addClass('istarget');
})
$(".close a").click(function(){
$("#popup").removeClass('istarget');
})
});
</script>
<![endif]-->
</body>
</html>
It's so close ;)
