基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）...
2024-05-13 16:34:51
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>基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）...相关推荐
- html自动弹出提示对话框代码,html5简单的手机端弹出对话框确认代码
特效描述:html5手机端 弹出对话框确认.html5手机端弹出对话框 代码结构 1. 引入JS 2. HTML代码 没有传递任何参数(需手动关闭) 弹出一个不带任何按钮,且是警告的框,并且两秒后自动 ...
- 手机端（APP点灯blinker）-PC端（Node-red）-设备端（ESP32）-客户端（MQTTX客户端）四者之间的通信——通过MQTT通信（上）
手机端(APP点灯blinker)-PC端(Node-red)-设备端(ESP32)-客户端(MQTTX客户端)四者之间的通信--通过MQTT通信(上) 前言: 本次实验是通过MQTT来进行手机端-设 ...
- 手机网页弹窗关不掉_layui.open 手机端,弹出层关不掉是咋回事?
''' //触发事件 var active = { notice: function () { var telNo = $('#telNo').val(); console.log(telNo); / ...
- 商城模板网站html5手机端_网站建设中，pc端与手机移动端设计一样吗
在过去几年中,企业做网站建设基本都是做pc端的网站,原因就是pc端的网页界面显示的更多,可以对企业想要展示的图片进行更合理的布局展示.而这些年,手机逐渐智能化,很多人几乎已经脱离了电脑只使用手机,在这 ...
- java弹出浏览器提示框_js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=&quo ...
- 移动端基于Vant组件封装底部弹出搜索多选列表
移动端基于Vant组件封装底部弹出搜索多选列表: 效果图如下: 点击确定后赋值给表单 使用到的组件:van-popup,van-search 组件页面代码:searchDataPopup.vue &l ...
最新文章
- pandas基于dataframe特定数据列的指定阈值将原dataframe分割成两个dataframe(split dataframe based on column value threshold
- tableau实战系列（三十八）-Tableau Server 端口耗竭的具体表象及如何避免端口耗竭
- DB-Engines 2018：PostgreSQL 蝉联“年度数据库”称号
- main函数的参数argc和argv
- 向量除法——标量乘法的逆运算
- 哪一个不是linux常用的shell,Linux下查看使用的是哪种shell的方法汇总
- 大叔手记（12）：我的一次面试经历（谈大叔如何应对面试官）
- 微软认证学习资料大集合(软件+资料)
- Windows Phone 使用 HttpWebRequest 对象，通过POST 方式上传图片
- 我的docker随笔35：jenkins服务部署
- 如何在合并复制中改变表结构?
- OpenStack的组件
- zImage内核镜像解压过程详解
- SQL Server 2008 R2与JDBC连接
- 成果展示 | 大数据应用开发平台DWF
- Android 微信登录 无法调起授权页面
- usc week 5 计算几何（包含凸包） 队内练习题
- Java8新特性（三） – 流式数据处理
- Rotator和Vector之间的转换
- ubuntu如何降级到之前的版本
热门文章
- 树莓派 ubuntu 18.04 安装 .NET Core
- linux 检查权限,检查目录下 文件的权限-linux shell脚本，
- comsat java_java-com.thoughtworks.xstream.converters.ConversionExce...
- 大红灯笼高高挂专业影评_浅谈《大红灯笼高高挂》
- CycliBarriar和CountdownLatch(计数器)
- 花费我一个月实习的工资买了一个软件测试就业班课程，成功转行了算是
- coba mysql_在Android Studio中将数据从MySQL数据库显示到TextView中-问答-阿里云开发者社区-阿里云...
- 怎么通过ip连接oracle,Oracle 无法通过IP连接问题
- katalon进行app测试_使用Katalon Studio创建你的第一个API测试
- java web手动部署_tomcat手动部署web项目的方法