jquery移动端弹窗(原创)

所属分类:UI,APP模板-弹出层,工具提示,其他

分享到微信朋友圈
X
jquery移动端弹窗(原创) ie兼容12

更新时间:2021-03-12 02:17:41

更新说明:

重要提示:建议使用前先观看源码

1、删除了tips方法中的形式2调用

2、修改time值为毫秒计算

tips.tips({msg: "你今天是否比昨天更帅了呢", time: 500 });

3、增加关闭弹窗调用

tips.close(); // 方法内可填参数,默认为500

4、使用该插件,需要链接rem.js

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return; // 这里的750 取决于设计稿的宽度       
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

5、本插件以设计稿为750px制作,如果你的设计稿不是750px,请自行修改 初始化 中css参数


更新时间:2021-03-10 22:38:54

调用方法

let tips = new ShenTips();
// 形式 1
tips.tips({
    msg: "你好啊",
    time: 0.5
});
// 形式 2 
tips.tips("你今天是否比昨天更帅了呢", 2);
tips.alert({
    title: "提示",
    msg: "你今天是否比昨天更帅了呢",
    confirm: function() {
        console.log("我确实比昨天更帅了");
    }
}) tips.confirm({
    title: "请确认",
    msg: "是否提交试卷",
    options: ["继续答题", "提交试卷"],
    close: false,
    cancel() {
        console.log("点击了取消按钮");
    },
    confirm() {
        console.log("点击了确认按钮");
    }
})
相关插件-弹出层,工具提示,其他

jQuery图像展示插件Strip

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

jQuery弹窗插件

支持拖拽,放大,缩小,最小化窗口的符合jquery语法规范的插件
  弹出层
 29644  292

18种弹框特效

18种弹框特效
  弹出层
 78270  829

vue弹窗插件vuemessage

一个基于vue的弹窗插件vuemessage
  弹出层
 54300  309

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

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复