jQuery实现小功能之弹出层

最新推荐文章于 2023-03-05 00:29:20 发布

BunnyMelody

最新推荐文章于 2023-03-05 00:29:20 发布

阅读量800

点赞数

分类专栏：【初级】前端文章标签：插件自定义 jquery实现 jquery

本文链接：https://blog.csdn.net/viciousDear/article/details/45010215

版权

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

36 篇文章 0 订阅

订阅专栏

自定义插件实现弹出层

编写过程中的问题:
因为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
}

BunnyMelody

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现小功能之弹出层

自定义插件实现弹出层【jqueryPopIndex.html】<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="jqueryPop.css"> <title>jquery 实现弹出层</title> <sc
复制链接

扫一扫