创建Onload淡入小部件

Question

我花了几个小时寻找可以制作淡入框的代码，但无济于事。 几乎这个工作原理是当这个人访问我的页面时，几秒钟后页面将变得不透明，然后在页面的中心打开一个'x'到'y'框，显示我选择的一些html，如a链接到注册页面或其他东西。它会使用一些jQuery，就像那样。

Answer 1

我不确定这是不是你想要的，但这样你就可以在当前页面的上方显示一个简单的Splash屏幕。

我在这里创建了一个示例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以更改斜杠屏幕的颜色/大小和整体外观。

Answer 2

修改

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

*当然，它需要jQuery。

这可能看起来像很多代码，但我认为处理类似于你在这里尝试的东西是非常合理的数量，并且肯定会尝试做一些以下的事情（例如淡化，选择和确定（位置）比使用jQuery或提供此类功能的任何备用库框架更“困难”和“复杂”。

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