专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > .NET相关

挪动端弹窗、手机网站提示框、mobile版弹层

发布时间:2011-06-26 20:31:11 文章来源:www.iduyao.cn 采编人员:星星草
移动端弹窗、手机网站提示框、mobile版弹层

前几天发了一个pc版的弹窗插件xyPop, 今天就发个移动版的,这个也是基于pc版进行开发的,并且可以自适应内容、自定义多个按钮及按钮事件可以应用到您的手机网站上,

功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、定时关闭、自适应内容……

1、配置参数:

2、调用极其简单(调用方式和pc版的差不多):

/* 1.===原始方法调用 (object模式) */
xyPop({
    id: "pop_msg",
    title: "弹窗提醒",
    content: "提示:数据请求成功,正等待服务器回应!",
    lock: 0,
    type: "success",
    btn: ["同意","不同意","无效按钮", "关闭"],
    btn1: function(){
        //alert("同意");
        xyPop("我只是一个简单的提示!");
    },
    btn2: function(){
        alert("我是关闭执行");
    },
    btn3: function(){
        xyPop("我是两个参数调用后的执行效果,确定要删除这条数据吗?", function(i){
            xyPop.msg("恭喜,数据删除成功!", {type: "success", lock: 1});
        });
    },
    btn4: function(i){
        alert("关闭");
    },
    fixed: true
});
                        
/* 2.===原始方法调用 (简单调用) */
    xyPop("我是一个参数测试【信息内容】!");
    //---两个参数:
    xyPop("我是二个参数测试【信息内容+图标】!", {type: "error"});
    xyPop("我是二个参数测试【信息内容+执行函数】,确定要删除这条数据吗?", function(){
        xyPop("调用后的执行效果,数据删除成功!");
    });
    //---三个参数:
    xyPop("我是三个参数测试【信息内容+图标+执行函数】确定要编辑这条数据吗?", {type: "confirm",lock:1}, function(){
        xyPop("调用【图标+执行函数】后的结果!");
    });

/* 3.===xyPop.msg调用 */
    xyPop.msg("只是简单的提示!");
    xyPop.msg("只是【附带参数】简单的提示!", {type:"success", lock:1});
    xyPop.msg("只是【附带参数】简单的提示!", function(){
        xyPop("附带参数提示成功!", "success");
    });
    xyPop.msg("您觉得这个图片很漂亮吗", {
        time: 0
        ,bottom: true
        ,type: 'confirm'
        ,btn: ['必须啊', '丑到爆']
        ,btn1: function(){
            xyPop.msg('雅蠛蝶 O.o', {
                time: 0
                ,bottom: true
                ,btn: ['按钮1','按钮2','按钮3']
                ,btn1: function(_i){
                    xyPop("3s后关闭窗口!!!", 3);
                }
                ,btn3: function(_i){
                    _i.close(); //这里可以调用本身关闭
                }
            });
        }
    });

3、mobile版弹窗截图如下:

 

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: