jQuery多种展开方式的弹出插件



26 102 35



特效描述:jQuery 多种展开方式 弹出插件,jQuery多种展开方式的弹出插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/layer-animate.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/method.js"></script>

3. HTML代码

<div class="btn btn1">从上滑落</div>
<div class="btn btn2">从下划入</div>
<div class="btn btn3">中间扩散</div>
<div class="btn btn4">中间扩散渐入</div>
<div class="btn btn5">从下方平滑进入</div>
<div class="btn btn6">翻转</div>
<div class="btn btn7">晃动</div>
<div class="btn btn8">左右伸缩</div>
<div class="btn btn9">透明度渐入</div>
<div class="btn btn10">无动效弹框</div>
<script type="text/javascript">
   //type值用来切换显示效果slideFromTop、slideFromBottom、showSweetAlert、none、layerFadeIn、layer-fadeInUpBig、layer-rollIn、layer-shake、layer-spread、layer-fadeIn
    $(".btn1").on("click",function(){
        var obj={
            type:"slideFromTop",
            //close属性为false为没有关闭按钮,close属性为true或无close属性则有关闭按钮
            close:"false",
            content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
            //值为0的时候,则表示不显示该按钮。否则显示该按钮
            btn:["取消","保存"]
        };
        method.msg_layer(obj);
    });
   $(".btn2").on("click",function(){
       var obj={
           type:"slideFromBottom",
           //有title属性的话,则有标题,标题内容为title值,无title属性则无标题
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["500px","200px"],
           btn:[0,"保存"]
       };
       method.msg_layer(obj);
   });
   $(".btn3").on("click",function(){
       var obj={
           type:"showSweetAlert",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["500px","auto"],
           btn:["取消","提交"]
       };
       method.msg_layer(obj);
   });
   $(".btn4").on("click",function(){
       var obj={
           type:"layerFadeIn",
           title:"弹框标题",
           close:"true",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["auto","150px"],
            btn:["取消",0]
       };
       method.msg_layer(obj);
   });
   $(".btn5").on("click",function(){
       var obj={
           type:"layer-fadeInUpBig",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["500px","200px"]
       };
       method.msg_layer(obj);
   });
   $(".btn6").on("click",function(){
       var obj={
           type:"layer-rollIn",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["500px","200px"]
       };
       method.msg_layer(obj);
   });
   $(".btn7").on("click",function(){
       var obj={
           type:"layer-shake",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["500px","200px"]
       };
       method.msg_layer(obj);
   });
   $(".btn8").on("click",function(){
       var obj={
           type:"layer-spread",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["300px","200px"]
       };
       method.msg_layer(obj);
   });
   $(".btn9").on("click",function(){
       var obj={
           type:"layer-fadeIn",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
       };
       method.msg_layer(obj);
   });
   $(".btn10").on("click",function(){
       var obj={
           type:"none",
           title:"弹框标题",
           content:"<div>弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容弹框内容",
           area:["500px","200px"]
       };
       method.msg_layer(obj);
   });
    $("body").delegate(".msg-layer-bg","click",function(){
        method.msg_close()
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<br><br><br><br><br><br><br><br><br>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到