При открытии вашего сайта по середине экрана появится всплывающий бокс приветствия, задний фон при этом потемнеет. Прежде чем использовать сайт, придется закрыть это окошко.

Разметка HTML

<div id="background" ></div>
<div id="sliderBox">
    <center>
    <br/>
    <input type="button" id="closeWelcomeBox" value="Закрыть"/><br /><br />
    Добро пожаловать на сайт<br />
    <a href="http://www.pcvector.net">http://www.pcvector.net</a>
    </center>
</div>

CSS

#sliderBox{
    width:200px;
    height:150px;
    background-color:silver;
    position:absolute;
    top:-400px;
    left:-400px;
    z-index:300;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 10px #000000;
}

#background{
    position: absolute;
    z-index: 200;
    top: 0px;
    left: 0px;
    width: 100%;
    opacity: .4;
    filter: alpha(opacity=40);
    background-color: #333333;
}

#closeWelcomeBox {
   background:#f2f2f2;
   border-radius:3px;
   border:2px solid #ddd;
}

javascript

Опять таки подключаем jQuery, плагин и вызываем этот самый плагин:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="slideto-1.0.js"></script>
<script language="javascript">

$(document).ready(function() {
    $('#sliderBox').slideTo({
        transition:300,
        top:'center',
        left:'center',
        inside:window
    });
    $('#background').height($(document).height());

    jQuery(window).resize(function() {
        $('#sliderBox').stop().slideTo({
            transition:300,
            top:'center',
            left:'center',
            inside:window
        });
    });

    var closeWelcomeBox;

    $(window).scroll(function(){
        if(!closeWelcomeBox){
            $('#sliderBox').stop().slideTo({
                transition:300,
                top:'center',
                left:'center',
                inside:window
            });
        }
    });

   
    $("#closeWelcomeBox").click(function(){
        $('#sliderBox').stop().slideTo({
            transition:500,
            top:-400
            });
            $('#background').fadeOut(500);
        closeWelcomeBox = true;
    });
});

</script>

СКАЧАТЬСкачек: 3017
1,97 Kb
Кто скачал?

ДЕМОПосмотреть
пример