jq封装好的弹窗，很好用

最新推荐文章于 2024-05-17 03:31:09 发布

1登峰造极

最新推荐文章于 2024-05-17 03:31:09 发布

阅读量725

点赞数

分类专栏： css jquery 弹窗

css 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

jquery

11 篇文章 0 订阅

订阅专栏

弹窗

1 篇文章 0 订阅

订阅专栏

就当记事本记下来，以后用直接打开
可以直接下载demo 链接：https://pan.baidu.com/s/1hLeLtzaXPRy9Vbt5IIOGMw
提取码：tjug
复制这段内容后打开百度网盘手机App，操作更方便哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/layer-animate.css">
<style>
*{
	margin:0;
	padding: 0;
}
</style>
</head>
<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" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/method.js"></script>
<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>
</body>
</html>

1登峰造极

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq封装好的弹窗，很好用

就当记事本记下来，以后用直接打开可以直接下载demo 链接：https://pan.baidu.com/s/1hLeLtzaXPRy9Vbt5IIOGMw提取码：tjug复制这段内容后打开百度网盘手机App，操作更方便哦<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org...
复制链接

扫一扫

专栏目录