Menu
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).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 ;)
693
CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
What is CSS? CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.
HTML Vs. CSS. HTML is a markup language used to create static web pages and web applications. CSS is a style sheet language responsible for the presentation of documents written in a markup language.
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.
141
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')
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
