CSS & HTML & JQuery - How to display a div OVER other divs and set to them a shady background
I need somethings like this : when i click on some link, the whole page must become as shady, and i want to display a new div (like 200px X 200px) in the center of the page, over other div (so not "float").
Like put this new div on relief and render the other div (backgound) unclickable.
How can I do it? I think CSS should do it, and I hope my request is clear :)
Thanks
UPDATE (Added my own code)
// HTML + Jquery
<body>
<div class="contenitore">
<div id="myBox" class="boxHidden">
Box I Want To Display
</div>
<div class="contenitoreSite">
<script type="text/javascript">
$(document).ready(function() {
$(".articles").click(function() {
$('.contenitoreSite').fadeTo('fast', 0.5);
$('#myBox').removeClass().addClass('box');
$('#myBox').fadeTo('fast', 1);
});
});
</script>
<a class="articles" href="#" onclick="return false;">Example</a>
</div>
</div>
</body>
// CSS
.boxHidden{display:none;}
.box{width:500px; height:500px; position:absolute; top:80px; left:240px; border:#000000 2px solid; background-color:#FF0000;}
.contenitore{width:980px; margin:0 auto; position:relative;}
.contenitoreSite{width:980px; margin:0 auto;}
My actual problems :
1 - I Want to put the whole page (except the box) with opacity. But with this function, each child get the opacity 0.5 value. How can I fix this? This is how its showed at the moment.
2 - Is this attribute opacity cross-browser? Because i read that IE7 doesnt support it, but with JQuery I should fix these kinds of problems.
3 - I would like to put the background (the shady one) unclickable. I think is possible to do this...
SOLVED
// HTML + Jquery
<body>
<div class="contenitore">
<script type="text/javascript">
$(document).ready(function() {
$(".articles").click(function() {
var maskHeight = $(document).height();
var maskWidth = $(window)开发者_StackOverflow社区.width();
$('.mask').css({'width':maskWidth,'height':maskHeight});
$('.mask').fadeIn(100);
$('.mask').fadeTo("fast",0.8);
var winH = $(window).height();
var winW = $(window).width();
$("#myBox").removeClass().addClass('box');
$("#myBox").css('top', winH/2-$("#myBox").height()/2);
$("#myBox").css('left', winW/2-$("#myBox").width()/2);
$("#myBox").fadeIn(1000);
});
});
</script>
<div id="myBox" class="boxHidden">
Box I Want To Display
</div>
<a class="articles" href="#" onclick="return false;">Example</a>
</div>
<div class="mask"></div>
</body>
// CSS
.contenitore{width:980px; margin:0 auto; font-size:14px; color:#000000;}
.boxHidden{display:none;}
.box{width:500px; height:500px; position:absolute; z-index:9999; top:0px; left:0px; border:#000000 2px solid; background-color:#FF0000; display:none;}
.mask {position:absolute; z-index:9000; top:0px; left:0px; background-color:#FFFFFF; display:none; }
This version should be cross-browser. Let me know what do you think ;)
actually it sounds like you need something like fancybox or lightbox.
You can do this yourself by using javascript and css. If you google 'creating modal window' you find a lot of results. Here is an example with 20 plugins and tutorials for creating such modal windows.
If you're not looking for something too fancy, and want to do it simply try this:
<body>
<your content>
<div id="shader">
<div id="window">
<window content>
</div>
</div>
</body>
And add this to the CSS:
div#shader {
position: fixed;
top:0;
left:0;
background-image: url('gray70%opacity.png');
}
div#window {
margin: auto;
background-color: white;
width: 200px;
height: 200px;
}
Then, just have a javascript function that changes the opacity of the shader div. If you use jQuery, its simply: $('div#shader').fadeIn('fast')
For your second problem, I would remove the your overlay div from the parent one, and set your jQuery function to both lower the opacity of the first div and show the second, so the code would be:
<div id="MainContent">
</div>
<div id="overlay">
</div>
jQuery:
$('div#MainContent').fadeTo('fast', 0.5)
$('div#overlay').fadeTo('fast', 1)
加载中,请稍侯......
精彩评论