I have spent hours looking for code that can make a fade-in box, but to no avail. Pretty much how this would work is when the person visits my page, after a few seconds the page will become opaque and then an 'x' by 'y' box will open in the center of the page displaying some html of my choice like a link to a signup page or something. It would use some jQuery, stuff like that.
Im not sure if this is what your are after but this will allow you to show a simple Splash screen overtop of your current page.
I have created a sample here http://jsfiddle.net/maurice_butler/5c8zN/
Assuming your page like below.
<div class="box">Your Login / splash info goes here</div>
<div>
This is your original page content.
This is the stuff I assume you want to be behind the splash div.
</div>
Adding the below CSS classes will give allow you to create a smooth transition showing your splash screen over your content.
.box{
background: #000000;
color: #666;
opacity: 0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.splash{
opacity: .9;
padding: 50%;
-webkit-transition: opacity 1s 1s, -webkit-transform 5s;
-moz-transition: opacity 1s 1s, -moz-transform 5s;
-ms-transition: opacity 1s 1s, -ms-transform 5s;
-o-transition: opacity 1s 1s, -o-transform 5s;
transition: opacity 1s 1s, transform 5s;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
To trigger the effect add the class "splash" to your containing div. (Delayed 5 seconds to show the idea.
setTimeout(function() {
$('.box').addClass('splash')
}, 5);
You can further customize the css to change the colour / size and overall look of your slash screen.
EDIT
After reading Maurice Butler's approach and being inspired, I created the following which doesn't use any additional plugins* and is more cross-browser compatible with opacity (including IE 8's tendency to not apply opacity to the inner element). Additionally, it handles the case of the user scrolling the page before or during the overlay's display, and keeps the overlay centered on the screen.
* Of course, it requires jQuery.
This may look like a lot of code, but I think it's a pretty reasonable amount for handling something like what you're trying to do here, and certainly trying to do some of what's below (such as fading, selecting and determining position) is more "difficult" and "complicated" than just using jQuery or any alternate library framework which provides this type of functionality.
HTML
<div class="splash">
<div class="container">
Username: <input type="text"/> Password: <input type="password"/>
</div>
</div>
CSS
.splash {
top: 0;
left: 0;
background: black;
color: #888;
}
.splash,
.splash .container {
display: none;
position: absolute;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.splash .container {
position: relative;
top: 50%;
width: 100%;
text-align: center;
}
Javascript/jQuery
$(document).ready(function(){
var $window = $(window),
$splash = $('.splash'),
$container = $splash.find('.container'),
seconds = 5;
var position = function(){
var position = {
top: $window.scrollTop(),
left: $window.scrollLeft(),
height: $window.height(true),
width: $window.width(true)
};
$splash.css(position);
return position;
};
var open = function(){
if (seconds--) {
return setTimeout(open, 1000);
}
position();
$window.bind('scroll.splashposition resize.splashposition', position);
$splash.fadeTo(300, .9, function(){
$container.fadeTo(200, 1);
});
};
var close = function(e){
if ($(e.target).is($splash)) {
$window.unbind('scroll.splashposition resize.splashposition');
$container.fadeTo(300, 0, function(){
$splash.fadeTo(200, 0);
});
}
};
$container
.css({opacity: 0, display: 'block'});
$splash
.css({opacity: 0, display: 'block'})
.click(close);
open();
});
Fullscreen: http://jsfiddle.net/userdude/WNnhp/embedded/result/
With code: http://jsfiddle.net/userdude/WNnhp/
Original Answer
Below is a link to a demo of boxy, which is a relatively lightweight jQuery-based modal dialog launcher. This plugin uses jQuery, plus two other included files:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://onehackoranother.com/projects/jquery/boxy/javascripts/jquery.boxy.js"></script>
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/boxy/stylesheets/boxy.css">
I am of course borrowing those from another site for this demo, but that's all of the files you need to make this code work.
HTML
<p>The splash page will display in 5 second(s).</p>
<!-- Used as the source for the modal window. -->
<div id="splash-message">
<div id="modal-message">
<h1>Title Block</h1>
<p>This is a splash message. This is a link to <a href="http://yahoo.com" target="_blank">Yahoo!</a></p>
<p>Click to dismiss.</p>
</div>
</div>
Javascript/jQuery
$(document).ready(function(){
var $blackout,
options = {
modal: true,
closeText: 'Dismiss',
show: false
},
message = $('#splash-message').html(),
dialog = new Boxy(message, options),
step = 5;
var close = function(){
if (!$blackout) {
$blackout = $('.boxy-modal-blackout');
$blackout.bind('click.detectboxyclose', close);
return;
}
dialog.toggle();
$('.boxy-modal-blackout').unbind('click.detectboxyclose');
};
var splash = function(){
if (step < 1) {
dialog.toggle();
close();
return;
}
step--;
setTimeout(splash, 1000);
};
splash();
});