正在创建Onload淡入窗口小部件

我不确定这是否是你想要的，但这将允许你在当前页面上方显示一个简单的启动屏幕。

我在这里创建了一个示例http://jsfiddle.net/maurice_butler/5c8zN/

假设你的页面如下。

<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>

​添加以下CSS类将允许您创建一个平滑的过渡，在内容上显示您的启动屏幕。

.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);
}

为了触发效果，将类"splash"添加到包含的div中。（延迟5秒以显示想法。

setTimeout(function() {
    $('.box').addClass('splash')
}, 5);​

您可以进一步自定义css来更改斜线屏幕的颜色/大小和整体外观。

编辑

在阅读了Maurice Butler的方法并受到启发后，我创建了以下内容，该内容不使用任何额外的插件*，并且与opacity更具跨浏览器兼容性（包括IE 8不将不透明性应用于内部元素的趋势）。此外，它还处理用户在覆盖显示之前或期间滚动页面的情况，并将覆盖保持在屏幕中心。

*当然，它需要jQuery。

这看起来可能有很多代码，但我认为这是一个相当合理的数量来处理像你在这里试图做的事情，当然，尝试做下面的一些事情（如褪色、选择和确定位置）比仅仅使用jQuery或任何提供这类功能的替代库框架更"困难"answers"复杂"。

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();
});

全屏显示：http://jsfiddle.net/userdude/WNnhp/embedded/result/

带代码：http://jsfiddle.net/userdude/WNnhp/

原始答案

下面是boxy演示的链接，它是一个相对轻量级的基于jQuery的模态对话框启动器。这个插件使用jQuery，以及另外两个包含的文件：

<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">

我当然是从另一个网站借用这些来进行这个演示，但这就是让这个代码工作所需的所有文件。

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();
});

http://jsfiddle.net/userdude/eKMF6/