- See more at: http://hungred.com/how-to/tutorial-simple-screen-grey-effect-jquery/#sthash.Dtw0Gzc7.dpuf
#box
2 {
3 width: 150px;
4 height: 150px;
5 background: #FFF;
6 border: red dotted 5px;
7 text-align: center;
8 position: absolute;
9 margin-left: -75px;
10 margin-top: -75px;
11 left: 50%;
12 top: 50%;
13 z-index: 20;
14 display: none;
15 }
16
17 #screen
18 {
19 position: absolute;
20 left: 0;
21 top: 0;
22 background: #000;
23 }
$(function(){
var pop = function(){
$('#screen').css({ "display": "block", opacity: 0.7, "width":$(document).width(),"height":$(document).height()});
$('#box').css({"display": "block"}).click(function(){$(this).css("display", "none");$('#screen').css("display", "none")});
}
$('#button').click(pop);
$(window).resize(function(){
$('#box').css("display") == 'block'?pop.call($('#button')):"";
});
});
- See more at: http://hungred.com/how-to/tutorial-simple-screen-grey-effect-jquery/#sthash.Dtw0Gzc7.dpuf
function grayOut(vis, options, extra) {
// Pass true to gray out screen, false to ungray
// options are optional. This is a JSON object with the following (optional) properties
// opacity:0-100 // Lower number = less grayout higher = more of a blackout
// zindex: # // HTML elements with a higher zindex appear on top of the gray out
// bgcolor: (#xxxxxx) // Standard RGB Hex color code
// grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order. Pass only the properties you need to set.
var options = options || {};
var zindex = options.zindex || 50;
var opacity = options.opacity || 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark=document.getElementById('darkenScreenObject');
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
var msgnode = document.createElement('div'); // Create the box layer.
msgnode.style.position='fixed'; // Position fixed
msgnode.style.display='none'; // Start out Hidden
msgnode.id='box'; // Name it so we can find it later
// give it a size and align it to center
msgnode.style.width = "300px";
msgnode.style.height = "300px";
msgnode.style.marginLeft= "-150px";
msgnode.style.marginTop= "-150px";
msgnode.style.textAlign = 'center';
msgnode.style.top= "50%"; // In the top
msgnode.style.left="50%"; // Left corner of the page
tbody.appendChild(msgnode); // Add it to the grey screen
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject'); // Get the object.
}
if (vis) {
// Calculate the page width and height
if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
var pageWidth = document.body.scrollWidth+'px';
var pageHeight = document.body.scrollHeight+'px';
} else if( document.body.offsetWidth ) {
var pageWidth = document.body.offsetWidth+'px';
var pageHeight = document.body.offsetHeight+'px';
} else {
var pageWidth='100%';
var pageHeight='100%';
}
//set the shader to cover the entire page and make it visible.
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= pageWidth;
dark.style.height= pageHeight;
dark.style.display='block';
if(extra == 'Y')
document.body.style.overflow = 'hidden';
document.getElementById("box").style.zIndex = zindex+10;
document.getElementById("box").style.border = "#000 solid 1px";
document.getElementById("box").style.display = "block";
document.getElementById("box").onclick = function() //attach a event handler to hide both div
{
dark.style.display="none";
document.getElementById("box").style.display = "none";
document.body.style.overflow = 'auto';
}
document.getElementById("box").style.backgroundColor="#FFF";
document.getElementById("box").innerHTML = "This is a box. Click me to exit effect.";
} else {
dark.style.display='none';
}
}
Hello every body.if this is the first time you visited wizdom here is what you need to know this webpage is managed by a 14 year old kid so you could imagine how smart i am well lets get back to the topic.their is a lot you could do here once you get to know it,first there are links to probably the best social medias under the logo,second their is a blog where i would post important things and any one can comment on it,next there is a news page where breaking news would be posted,then there is a guestbook its for guest to comment with out putting any more information maybe email and name,then next their is contact us page that is used when you have problems any problem will be resolved and posted on FAQ to help other users,then their is an online games pages that is recommended for kids but adults could play it {pointing this out this games are added by their popularity if their are any games that are inappropriate for kids age below 8 we are sorry}and at last their is a video pa
... Read more »