3,JQuery几种常用的弹出层效果

这里需要用到一个插件layer.js，下载地址http://xu.sentsin.com/jquery/layer/

当然也是需要引入jquery.js的,jquery的版本要求在1.8.2以上

<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" >
$(document).ready(function (){
    $("#demo1").click(function (){
        $.layer({
            area : ['auto','auto'],
            dialog : {msg:'web攻城师kenan',type : 8}
        });
    });

    $("#demo2").click(function (){
        $.layer({
            shade : ['',false],
            area : ['auto','auto'],
            title : ['',false],
            dialog : {msg:'web攻城师kenan'}
        });
    });

    $("#demo3").click(function (){
        $.layer({
            time:2,
            closeBtn : [0 , false],
            shade : ['',false],
            area : ['auto','auto'],
            title : ['',false],
            dialog : {msg:'web攻城师kenan'}
        });
    });

    $("#demo4").click(function (){
        $.layer({
            shade : [0.5,'',false],
            area : ['auto','auto'],
            dialog : {
                msg:'您是如何看待web开发？',
                btns : 2,
                type : 4,
                btn : ['重要','奇葩'],
                yes : function(){
                    layer.msg('您选择了重要。',2,1);
                },
                no : function(){
                    layer.msg('奇葩!!!',2,4);
                }
            }
        });
    });

    $("#demo5").click(function (){
        $.layer({
            shade : ['',false],
            type : 1,
            area : ['315px','auto'],
            offset : ['auto','auto'],
            border : [10 , 0.5 , '#628C1C', true],
            page : {dom : '.layer_notice'},
            close : function(index){
                LAYER.close(index);
                $('.layer_notice').hide();
            }
        });
    });

    $("#demo6").click(function (){
        $.layer({
            type : 1,
            title : ['',false],
            fix : false,
            offset:['50px' , ''],
            area : ['515px','615px'],
            page : {dom : '#tong'}
        });
        $('#tong').live('click',function(){
            var index = LAYER.getIndex(this);
            LAYER.close(index);
        });
    });

    $("#demo7").click(function (){
        $.layer({
            type : 2,
            closeBtn : [0,true],
            iframe : {
                src : 'http://www.baidu.com'
            },
            title : ['' , false],
            area : ['500px','300px'],
            success : function(){ //层加载成功后进行的回调
                LAYER.shift('right-bottom',2000); //浏览器右下角弹出
            }
        });
    });

    $("#demo8").click(function (){
            layer.tips('我爱你，你爱我吗？' , this , 3);

    });

});
</script>
<style type="text/css">
 html, body {
    padding:100px;
    font-family: '微软雅黑';
    font-size: 14px;
}
  .link{
    margin-right:50px;
    color: #363636;
    text-decoration: none;
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #AAAAAA;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    margin-bottom:50px;
    padding: 0 20px;
    text-align: center;
}
.link:hover{
    color:red;
    cursor:pointer;
}
</style>
<a id="demo1" class="link">信息框一 </a>
<a id="demo2" class="link">信息框二 </a>
<a id="demo3" class="link">自动消失的信息框 </a>
<a id="demo4" class="link">询问框 </a>
<a id="demo5" class="link">页面层一 </a>
<a id="demo6" class="link">页面层二 </a>
<a id="demo7" class="link">iframe层 </a><br/><br/><br/>
<div>
<a id="demo8" class="link" style="float:left;">itips层 </a>
</div>
<div class="layer_notice" style="height:200px;background-color:green;display:none;">大家好哦，独领风骚付款</div>
<div id="tong" style="display:none;"><img src="images/tong.jpg" width="300" height="200"/></div>