jQuery实现小功能之弹出层

最新推荐文章于 2021-04-15 17:37:45 发布

原创最新推荐文章于 2021-04-15 17:37:45 发布 · 904 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#插件 #自定义 #jquery实现 #jquery

【初级】前端专栏收录该内容

36 篇文章

订阅专栏

自定义插件实现弹出层

编写过程中的问题:
因为jquery在1.10之后的版本不支持.live()绑定方法,所以此文以.on()方法绑定

效果图
【jqueryPopIndex.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="jqueryPop.css">
        <title>jquery 实现弹出层</title>
        <script type="text/javascript" src="jquery-2.1.3.js"></script>
        <script type="text/javascript" src="jquery.pop.js"></script>
    </head>

    <body>
        <a href="#" class="bigLink" data-revealId="myPop">单击从上面弹出</a>
        <a href="#" class="bigLink" data-revealId="myPop" data-animation="fade">单击直接弹出有动画</a>  <!--选择动画种类-->
        <a href="#" class="bigLink" data-revealId="myPop" data-animation="none">单击直接弹出无动画</a>

        <!---弹出的显示层的div-->
        <div id="myPop" class="revealPop">
            <h1>jQuery弹出层</h1>
            <p>在这里可以设置可以填写的内容的哦~ 可拓展   </p>
            <a class="closeRevealPop">&#215;</a><!---关闭弹出层的叉号,在css中定义样式-->
        </div>
    </body>
</html>

【jquery.pop.js】


(function($){
    $(document).ready(function(){
            $('a[data-revealId]').on('click',function(){//页面加载时绑定click事件
            var popLocation = $(this).attr('data-revealId');
            $('#'+popLocation).reveal($(this).data());
        });
    });

    $.fn.reveal = function(options){
        var defaults = {
            animation:'fadeAndPop',                     //从头部渐渐弹入
            animationSpeed:300,
            closeOnBackgroundClick:true,                //可以选择单击背景能否关闭弹出层
            closeRevealPopClass:'closeRevealPop'
        };

        var options = $.extend({},defaults,options);

        return this.each(function(){
            var popText = $(this),
                topOffset = parseInt(popText.css('top')),
                topOffsetAndHeight = popText.height() +topOffset,
                locked = false,                         //显示与否的锁,false不显示
                popBG=$('revealPopBg');

            if(popBG.length == 0)
                popBG = $('<div class="revealPopBg"/>').insertAfter(popText);

            popText.bind('reveal:open',function(){
                popBG.unbind('click');
                $('.'+options.closeRevealPopClass).unbind('click');
                if(!locked){
                    lockPop();                          //三种不同的弹入效果
                    if(options.animation == 'fadeAndPop'){
                        popText.css({'top':$(document).scrollTop()-topOffsetAndHeight,'opacity':0,'visibility':'visible'});
                        popBG.fadeIn(options.animationSpeed/2);
                        popText.delay(options.animationSpeed/2).animate({
                            'top':$(document).scrollTop()+topOffset+'px',
                            'opacity':1     
                        },options.animationSpeed,unlockPop());
                    }

                    if(options.animation == 'fade'){
                        popText.css({'opacity':0,'visibility':'visible','top':$(document).scrollTop()+topOffset});
                        popBG.fadeIn(options.animationSpeed/2);
                        popText.delay(options.animationSpeed/2).animate({
                            'opacity':1
                        },options.animationSpeed,unlockPop());
                    }

                    if(options.animation == 'none'){
                        popText.css({'visibility':'visible','top':$(document).scrollTop()+topOffset});
                        popBG.css({'display':'block'});
                        unlockPop();
                    }
                }
                popText.unbind('reveal:open');          
            });

            popText.bind('reveal:close',function(){
                if(!locked){
                    lockPop();
                    if(options.animation == 'fadeAndPop'){//三种不同的弹出效果
                        popBG.delay(options.animationSpeed).fadeOut(options.animationSpeed);
                        popText.animate({
                            'top':$(document).scrollTop()-topOffsetAndHeight+'px',
                            'opacity':0
                        },options.animationSpeed/2,function(){
                            popText.css({'top':topOffset,'opacity':1,'visibility':'hidden'});
                            unlockPop();
                        });
                    }

                    if(options.animation == 'fade'){
                        popBG.delay(options.animationSpeed).fadeOut(options.animationSpeed);
                        popText.animate({
                            'opacity':0
                        },options.animationSpeed,function(){
                            popText.css({'opacity':1,'visibility':'hidden','top':topOffset});
                            unlockPop();
                        });
                    }

                    if(options.animation == 'none'){
                        popText.css({'visibility':'hidden','top':topOffset});
                        popBG.css({'display':'none'});
                    }
                }
                popText.unbind('reveal:close');
            });

            popText.trigger('reveal:open');

            var closeButton = $('.' + options.closeRevealPopClass).bind('click',function(){
                popText.trigger('reveal:close')
            });

            if(options.closeOnBackgroundClick){                 //单击背景将不显示弹出层
                popBG.css({'cursor':'pointer'});
                popBG.bind('click',function(){
                    popText.trigger('reveal:close')
                });
            }

            $('body').keyup(function(e){
                if(e.which == 27){                              //判断是否按下ESC键
                    popText.trigger('reveal:close');
                }
            });

            function unlockPop(){
                locked = false;
            }

            function lockPop(){
                locked = true;
            }

        });
    }
}(jQuery));

【jqueryPop.css】

body{
    font-family:font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif;
}

.bigLink{
    display:block;
    margin-top:100px;
    text-align:center;
    font-size:70px;
    color:#06f;
}

.revealPopBg{                       /*显示弹出层时, 背景的样式设置*/
    position:fixed;
    height:100%;
    width:100%;
    background:#000;
    background:rgba(0,0,0,.4);
    z-index:100;                    /*为了设置层次*/
    display:none;
    top:0;
    left:0;
}

.revealPop{                         /*弹出层样式*/
    visibility:hidden;
    top:100px;
    left:50%;
    margin-left:-300px;
    width:520px;
    background:#eee url(shadow.png) no-repeat -200px -80px;
    position:absolute;
    z-index:101;                    /*显示在背景层之上*/
    padding:30px 40px 34px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow:0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow:0 0 10px rgba(0,0,0,.4);
    box-shadow:0 0 10px rgba(0,0,0,.4);
}

.revealPop .closeRevealPop{         /*关闭显示层的按钮的样式*/
    font-size:22px;
    line-height:.5;
    position:absolute;
    top:8px;
    right:11px;
    color:#aaa;
    text-shadow:0 -1px 1px rgba(0,0,0,.6);
    font-weight:bold;
    cursor:pointer
}