Fading Background - html

Question

I want to have a panel open up whenever I click a link. I want the entire page to fade out and only have that panel visible.
How can I do that?
Thanks
Kousha

Answer 1

You could set a div with position fixed to the top left corner, height and width 100%, z-indexed higher than everything and CSS transition or jQuery animate the div into view. Use an opaque background so the parent page is not visible.

Answer 2

you have to prepare 2 things:
a div to cover the whole page
the panel you want to fade in
upon clicking the link, "fade in" the div so that it will cover the entire page and fade in the panel as well. You may need to specify the z-index of that div and panel to make sure they are on top.

Answer 3

As far I get it, you can have this effect by two way
1. For first way you need to separate your content and the panel like-
<div id="container">
<div id="content">
<!-- your content goes here -->
link
</div>
<div id="panel">
<!-- your panel code goes here-->
</div>
</div>
and position your panel absolutely respected to the container and use some jQuery to fade the content div out like-
$(document).ready(function(){
$('#link').on('click',function(){
$('#panel').show();
$('#content').hide();
});
});
If you need to keep your panel code beside the links then you can reduce the opacity of the content like-
<div id="container">
<div id="content">
<!-- your content goes here -->
Link
</div>
<div id="panel">
<!-- your panel code goes here-->
</div>
</div>
and the jQuery-
$(document).ready(function(){
$('#link').on('click',function(){
$('#panel').show();
$('#content').css('opacity','0');
});
});
This is a rough code and I've omitted many thing. I hope you'll figure out when you have the idea. Thanks

Answer 4

You can have a div with the contents of the page, and another with the contents of the panel. You will probably want to position your panel at an absolute or fixed position on the page. After that, you can just attach functions in JavaScript/jQuery to whatever events you want to trigger the fade to change the opacity or display of your page contents and panel. Below is an example.
HTML:
<div id="A">
<div id="B">
<p id="1">Click Me!</p>
</div>
</div>
<div id="C"><p id="2">Click Me!</p></div>
CSS:
p {
cursor: pointer;
}
#A {
height: 400px;
width: 300px;
background: grey;
}
#B {
height: 200px;
width: 300px;
background: red;
}
#C {
height: 100px;
width: 200px;
background: blue;
position: absolute;
top: 50px;
left: 50px;
display: none;
}
jQuery:
$('#1').click(function(){
$('#A').fadeOut('slow');
$('#C').fadeIn('slow');
});
$('#2').click(function() {
$('#C').fadeOut('slow');
$('#A').fadeIn('slow');
});
Demo
In this example, the "A" div would be your contents and the "C" div would be your panel. The p texts that say "Click Me!" are your links.