轻量级自适应屏幕弹窗插件(原创)

所属分类:UI-弹出层,工具提示

 27122  309  查看评论 (4)
分享到微信朋友圈
X
轻量级自适应屏幕弹窗插件(原创) ie兼容10

更新时间:2019/1/21 上午11:00:00

更新说明:Version:  pro 1.10x

新增了图片循环展示功能优化了图片初始化方法优化了加载层和消息层的定位问题新增了滚轮控制翻页方法,兼容IE,Firefox等优化了代码可阅读性,更多更详细的注释,方便大家阅读本次更新到此结束,如果你有更好的意见或者建议,请在下方留言告诉我哦~


发布时间:2019-1-17 9:48

使用方法

首先引入css

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link rel="stylesheet" href="layAway.css">

引入js:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="layAway.js"></script>

消息层用法:

lay({
    type: 'msg',
    content: 'Hello World!',
    closeOther: true,
    icon: 'comment-o', // 图标库为fontawesome,不需要加fa前缀
    before: function() {
        console.log('你打开了弹窗')
    }
});

加载层用法:

lay({
    type: 'load',
    before: function() {
        console.log('你打开了加载层')
    }
});

图片层用法:

lay({
    type: 'image',
    content: 'xxx.png',
    before: function() {
        console.log('你打开了图片层')
    }
});
相关插件-弹出层,工具提示

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 32067  391

jQuery多功能图片弹窗插件pirobox

点击图片列表中的图片会放大,并可以随意切换
  弹出层
 37348  380

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 51392  398

jquery网站功能介绍步骤

网站功能介绍步骤,可以引导用户该怎么操作,或者应该做什么
  弹出层
 38356  453

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    程贫 0
    2019/4/29 15:59:45
    放入项目后,那个Close颜色改不了,单独运行又可以改颜色。不知是否是bootstrap4的缘故吗?
        深渊0
        2019/5/15 14:40:17
        有可能,你在颜色后面加个!important试试?
    回复
    神破 0
    2019/1/18 2:10:57
    手机上图片比例就变了
        深渊0
        2019/1/19 9:27:01
        图片的问题
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复