基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）...

最新推荐文章于 2024-01-12 16:10:41 发布
最新推荐文章于 2024-01-12 16:10:41 发布
阅读量225 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/20683
版权

layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层支撑，采用Native JavaScript编写，完全独立于PC版的layer，您需要按照场景选择使用。 官方地址：http://layer.layui.com/mobile/ 下载地址：http://download.csdn.net/detail/cometwo/9441001

这里写图片描述
这里写图片描述

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta http-equiv="refresh" content="100">
        <title>手机</title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <link rel="stylesheet" href="css/layer.css" />
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/layer.js"></script>
        <style type="text/css">
            input {
                width: auto;
                padding: 10px;
                line-height: 20px;
                background: red;
                border: 1px solid blue;
                margin: 10px;

            }
        </style>
        <script type="text/javascript">
            FastClick.attach(document.body);
            $(function() {
                $('.btn1').click(function() {
                    layer.open({
                        content: '您好',
                        anim: true,
                        time: 2 //2秒后自动关闭
                    });
                });
                $('.btn2').click(function() {
                    layer.open({
                        content: '通过style设置你想要的样式',
                        style: 'background-color:#09C1FF; color:#fff; border:none;margin: 0px;',
                        time: 2
                    });
                });
                $('.btn3').click(function() {
                    layer.open({
                        title: [
                            '我是标题',
                            'background-color:#fff; color:#000;'
                        ],
                        cancel: function() {
                            layer.open({
                                content: '你点了x',
                                time: 1
                            });
                        },
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        },
                        content: '标题风格任你定义。。'
                    });
                });
                $('.btn4').click(function() {
                    layer.open({
                        //                      title: [
                        //                          '我是标题',
                        //                          'background-color:#8DCE16; color:#fff;'
                        //                      ],
                        content: '通过style设置你想要的样式',
                        btn: ['OK']
                    });
                });
                $('.btn5').click(function() {
                    layer.open({
                        content: '你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？',
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        }
                    });
                });
                $('.btn6').click(function() {
                    layer.open({
                        title: '信息',
                        content: '移动版和PC版不能同时使用在同一页面。'
                    });
                });
                $('.btn7').click(function() {
                    layer.open({
                        title: '提示',
                        content: '您确定要刷新一下本页面吗？',
                        btn: ['嗯', '不要'],
                        yes: function(index) {
                            location.reload();
                            layer.close(index);
                        }
                    });
                });
                $('.btn8').click(function() {
                    layer.open({
                        type: 1,
                        content: '<img src="img/layer-mobile.png">'
                    })
                });
                $('.btn9').click(function() {
                    layer.open({
                        type: 1,
                        content: '可传入任何内容，支持html。一般用于手机页面中',
                        anim: 0,
                        style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 30px; border:none;color:red'
                    });
                });
                $('.btn10').click(function() {
                    layer.open({
                        type: 2
                            //,shade: false
                            ,
                        time: 5
                            //,content: '加载测试中…'
                    });
                });
            })
        </script>
    </head>


    <body>
        <input type="button" class="btn1" value="弹出框1" />
        <input type="button" class="btn2" value="弹出框2" />
        <input type="button" class="btn3" value="弹出框3" />
        <input type="button" class="btn4" value="弹出框4" />
        <input type="button" class="btn5" value="弹出框5" />
        <input type="button" class="btn6" value="信息框" />
        <input type="button" class="btn7" value="询问框" />
        <input type="button" class="btn8" value="二维码" />
        <input type="button" class="btn9" value="页面层" />
        <input type="button" class="btn10" value="加载条" />
    </body>


</html>


<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta http-equiv="refresh" content="100">
        <title>手机</title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <link rel="stylesheet" href="css/layer.css" />
        <script type="text/javascript" src="js/fastclick.js"></script>
        <script type="text/javascript" src="js/layer.js"></script>
        <style type="text/css">
            input {
                width: auto;
                padding: 10px;
                line-height: 20px;
                background: red;
                border: 1px solid blue;
                margin: 10px;

            }
        </style>
        <script type="text/javascript">
            FastClick.attach(document.body);
            $(function() {
                $('.btn1').click(function() {
                    layer.open({
                        content: '您好',
                        anim: true,
                        time: 2 //2秒后自动关闭
                    });
                });
                $('.btn2').click(function() {
                    layer.open({
                        content: '通过style设置你想要的样式',
                        style: 'background-color:#09C1FF; color:#fff; border:none;margin: 0px;',
                        time: 2
                    });
                });
                $('.btn3').click(function() {
                    layer.open({
                        title: [
                            '我是标题',
                            'background-color:#fff; color:#000;'
                        ],
                        cancel: function() {
                            layer.open({
                                content: '你点了x',
                                time: 1
                            });
                        },
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        },
                        content: '标题风格任你定义。。'
                    });
                });
                $('.btn4').click(function() {
                    layer.open({
                        //                      title: [
                        //                          '我是标题',
                        //                          'background-color:#8DCE16; color:#fff;'
                        //                      ],
                        content: '通过style设置你想要的样式',
                        btn: ['OK']
                    });
                });
                $('.btn5').click(function() {
                    layer.open({
                        content: '你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？',
                        btn: ['确认', '取消'],
                        shadeClose: false, //默认：true，是否点击遮罩时关闭层
                        yes: function() {
                            layer.open({
                                content: '你点了确认',
                                time: 1
                            });
                        },
                        no: function() {
                            layer.open({
                                content: '你选择了取消',
                                time: 1
                            });
                        }
                    });
                });
                $('.btn6').click(function() {
                    layer.open({
                        title: '信息',
                        content: '移动版和PC版不能同时使用在同一页面。'
                    });
                });
                $('.btn7').click(function() {
                    layer.open({
                        title: '提示',
                        content: '您确定要刷新一下本页面吗？',
                        btn: ['嗯', '不要'],
                        yes: function(index) {
                            location.reload();
                            layer.close(index);
                        }
                    });
                });
                $('.btn8').click(function() {
                    layer.open({
                        type: 1,
                        content: '<img src="img/layer-mobile.png">'
                    })
                });
                $('.btn9').click(function() {
                    layer.open({
                        type: 1,
                        content: '可传入任何内容，支持html。一般用于手机页面中',
                        anim: 0,
                        style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 30px; border:none;color:red'
                    });
                });
                $('.btn10').click(function() {
                    layer.open({
                        type: 2
                            //,shade: false
                            ,
                        time: 5
                            //,content: '加载测试中…'
                    });
                });
            })
        </script>
    </head>


    <body>
        <input type="button" class="btn1" value="弹出框1" />
        <input type="button" class="btn2" value="弹出框2" />
        <input type="button" class="btn3" value="弹出框3" />
        <input type="button" class="btn4" value="弹出框4" />
        <input type="button" class="btn5" value="弹出框5" />
        <input type="button" class="btn6" value="信息框" />
        <input type="button" class="btn7" value="询问框" />
        <input type="button" class="btn8" value="二维码" />
        <input type="button" class="btn9" value="页面层" />
        <input type="button" class="btn10" value="加载条" />
    </body>


</html>
weixin_34410662
关注
基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）
黄沙百战穿金甲，不破楼兰终不还。
02-23 1万+
layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层支撑，采用Native JavaScript编写，完全独立于PC版的layer，您需要按照场景选择使用。 官方地址：http://layer.layui.com/mobile/ <!DOCTYPE html> <html> <head> <meta charset="ut
Golang优秀开源项目汇总, 10大流行Go语言开源项目, golang 开源项目全集(golang/go/wiki/Projects), GitHub上优秀的Go开源项目...
weixin_34245082的博客
05-08 6093
  Golang优秀开源项目汇总（持续更新。。。）我把这个汇总放在github上了， 后面更新也会在github上更新。 https://github.com/hackstoic/golang-open-source-projects  。 欢迎fork， star ， watch， 提issue。    资料参考来源：http://studygolang.com/projects 监控...
layer mobile手机端弹出框，询问框
02-23
layer mobile手机端弹出框，询问框http://blog.csdn.net/libin_1/article/details/50726055
layer mobile弹出层
Xiao_peng117的博客
10-07 638
1.基本用法https://www.cnblogs.com/zhupeng-1024/p/5991989.html 2.绑定form submit会有问题，原因不详
layer mobile v2.0手机端
01-09
目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，优化手机端信息框，确认框，浮出层，自定义、iframe、prompt、loading等展示方式
Layer For Mobile 弹窗 input输入文字后，点击取消确定按钮失效（需点击两次）
denghut882925的博客
04-26 237
webapp中使用Layer For Mobile弹出弹窗，修改昵称输入文字后，ios手机中，如果不先点击收起键盘，两个按钮点击之后无效... 两个按钮的方法是写在这里的——> 最后只能吧点击按钮click事件单拎出来。。。发现还是会无效。 那就只能试下touchstart。。。发现可以了。 解决办法：layer按钮点击事件拎出来写，并且使用touchstart方法； ...
android的artdialog的用法
weixin_33953249的博客
02-17 101
2019独角兽企业重金招聘Python工程师标准>>> ...
web软件测试
qq_40738741的博客
06-15 788
web软件测试小项目实现 1、web软件测试的环境配置 其中包含软件、语言、浏览器环境配置 https://download.csdn.net/download/qq_40738741/12524311 2、项目源代码 https://download.csdn.net/download/qq_40738741/12524335 3、项目详情 （1）测试网站http://tpshop-test.itheima.net/ （2）测试运行文件及测试报告 # 定义测试套件 suite = unittest.Tes
LVDS接口与MIPI接口的区别
01-09
MIPI（Mobile Industry Processor Interface）是由ARM、Nokia、ST、TI等知名公司于2003年联合成立的一个联盟，旨在通过标准化手机内部的各种接口来简化手机的设计复杂度并提高设计灵活性。MIPI联盟制定了多项标准，...
Android DownloadManager下载管理，app更新
csdn_aiyang的博客
03-20 4369
目录 前言 一、介绍 二、使用事项 三、Request类注意事项 四、Query 类 五、下载完成监听 六、原理简析 七、小结 前言 在日常APP的开发中，通常情况下无可避免的要与调用网络后台数据接口。关于Android 网络请求接口的方式可以点击此此处进行学习。当我们实现一个从网络下载文件的功能时候，一般设计思路是这样的：使用Http发起请求，在IntentService的...
layer_mobile的简单使用
anmi7832的博客
12-11 653
layer mobile弹层组件是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。 由于是采用原生 JavaScript编写，所以并不依赖任何第三方库。 layer mobile完全独立于PC版的layer，只需要按照场景选择使用即可。 官方文档http://layer.layui.com/mobile/ 使用步骤一: 下载该组件的相关文...
layer弹层组件移动版介绍以及使用方法示例代码
zcc的博客
12-29 4375
1、layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。 和layer PC版不同的是，只提供一个核心调用方法，即：layer.open(options) 官网地址：https://layer.layui.com/mobile/ API地址：https://layer.layui.com/mob...
HTML+JS + layer.js +qrcode.min.js 实现二维码弹窗
最新发布
qq_45515347的博客
01-12 732
html 简单实现二维码生成
layer弹出图片二维码
qq_18630487的博客
11-10 6670
var html=""; layer.open({ type : 1, title : false, closeBtn : 0, shade: [0.001, '#393D49'], area : '200px', skin : 'layui-layer-nobg', //沒有背景色 shadeClose : true, content : html }); }
javascript鼠标悬浮出现二维码
Min的博客
12-02 3189
<div id="Layer1" style="display: none; position: absolute; z-index: 100;box-shadow: 6px 6px 4px #888888;"> </div> <li><a href="#" onmouseout="hiddenPic();" onmousemove="showPic(event,'assets/
layer弹出图片
飞鸿先森的博客
03-16 1万+
layer弹出层非常之好用，用户体验非常好，有这样一个需求，当点击指定文字或是缩略图后，使用layer弹出原图片，并且弹出层的宽和高根据图片大小自动变化。下面是实现这一功能的代码。 function showImg(url){     var img = "&lt;img src='" + url + "' /&gt;"; layer.open({     type: 1, ...
layer弹出图片的问题
热门推荐
玥玥的博客博客博客
07-21 1万+
layer下载地址：http://layer.layui.com/ jQuery下载地址：http://www.jq22.com/jquery-info122 使用layer弹框的步骤： 1.引入javascript文件(jQuery文件+layer.js,先引入iQuery文件，注意引入路径) 2.参考官网上的demo来编写javascript代码 以下是我做测试的demo, 文件位置...
使用layer弹出层显示图片
LGM_Euler的博客
08-31 8288
需求是在页面上点击“生成二维码”按钮，页面弹出显示二维码图片，由用户点击关闭。二维码可以在前台使用js生成也可以在后台生成，两种方式网上都有很多例子。我们团队对前端懂得都不是很多，使用js在前端生成时候出现不少问题，而且考虑到其他需求我们在后端生成二维码并把图片路径传到页面来显示。 一开始想用layer.photos相册层来做，但是多次尝试并没有解决问题，controller里面拼装json数据也没
openlayer加载电网思极地图https://map.sgcc.com.cn/map?v=3.0.0
03-29
var wmtsLayer = new ol.layer.Tile({ source: new ol.source.WMTS({ url: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值