Layer(Web弹窗)
<script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="layer.js的路径"></script>
Layer的open方法：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
</head>
<body>
<style>
.test{width: 300px; height: 300px; background:#ddd; color: #ff0000; margin:200px auto; text-align: center; font-size: 16px; font-family:Microsoft YaHei;}
fieldset{border: none; border-top: 1px solid #333;}
</style>
<div class="test" style=" color: #ff0000;">
<fieldset>
<legend>这是弹窗测试页面</legend>
<p>这是弹窗测试页面</p>
<input type="button" value="点击触发弹窗" class="testlayer">
</fieldset>
</div> <script>
$(function(){
layer.config({
skin: 'layui-layer-lan'
})
/*layer.open({
//skin: 'demo-class'
});*/
$(".testlayer").on("click",function(){
layer.open({
type: 1,
title:"测试",
closeBtn:0, //右上角关闭按钮
//skin: 'layui-layer-rim', //加上边框
area: ['450px', '250px'], //宽高
anim:2,//弹出动画
btn:['确定购买','取消购买'],//按钮
content: '<p style=" text-align: center;">html内容</p>',//弹窗内容
//maxmin:true,//最大最小化按钮
resize:false,//是否允许拉伸
yes:function(index,layerdom){
layer.close(index);
console.log("你点击了确定按钮");
},
btn2:function(index,layerdom){
console.log("你点击了取消按钮");//输出日志
//return false;//开启该代码可以禁止点击该按钮关闭
},
cancel:function(index,layerdom){
console.log("你点击了右上角的关闭按钮");
}
});
}); })
</script>
</body>
</html>
Layer(Web弹窗)的更多相关文章
- Layer 一个让你想到即可做到的web弹窗/层 解决方案
最近工作上面用到的web弹窗组件layer layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. layer官方 ...
- 使用layer的弹窗时，出现layer引入成功，触发成功，控制台无报错，但是页面无变化或者仅出现遮罩层的问题的解决思路
------------------------------------------20180410补充------------------------------------------------ ...
- layer.msg弹窗后没有自动关闭——问题解决
layer.msg弹窗后没有自动关闭,里面也没有配time: -1 layer.msg("信息体", {time: -1}); 后面发现是jquer和layer版本不对,之前自己用 ...
- layer打开弹窗时传递参数(content:)
在使用layer打开弹窗时,我希望带一些参数过去,进行某些判断.直接就可以用链接+参数的方式即可. js var userGrade=Mrant layer.open({ title: '权限管理', ...
- layui里面的layer模块弹窗，强制居中的方法！！！
每次调用layer弹窗做动态展示的时候,只要内容不固定或者需要二次渲染 比如layui.form.render()进行渲染的时候 由于弹窗已经出来了,只是content部分的结构改变了宽度或者高度,l ...
- 一个让你想到即可做到的web弹窗/层----Layer
Layer layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是 ...
- ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗（PopupTemplate）
上一篇文章中讲到Popup是一个弹窗,是View对象的默认内置弹窗,并且在View对象构造时就顺便构造了. 那么这个PopupTemplate是什么呢? 后半截单词Template是"模板& ...
- layer.js 弹窗组件API文档
基础参数 type title content skin area offset icon btn closeBtn shade shadeClose time id shift maxmin f ...
- layer关闭弹窗
一.关闭弹出窗 这是layer官网给出的帮助手册,讲解的比较详细 分成两种情况: 1.弹出层不是新的页面的时候,直接获得该弹窗的索引,然后执行close方法 layer.close(); 2.弹出窗是 ...
随机推荐
- vue-router+iview（简单例子）
根据上面我们已经建立好的工程项目,我们来加入路由等方法. 首先修改我们的HelloWorld.vue,加入iview的Layout组件 第二步,建立两个我们对应路由的文件 <style scop ...
- BootStrap 栅格化换行问题
bootstrap 3的栅格系统有时会出现错位情况,原因是上一行的元素高度不一,导致元素float错误. 解决方法 使用栅格系统的时候,应该在每一行都使用row单独包裹起来,不要直接在一行中连续加入c ...
- 大咖手把手教您，DLA一键建仓！
DLA很早之前就支持了对关系型数据库的查询,但是一直以来用户会有一个担心: 直接分析RDS里面的数据会不会影响线上业务. 这个担心很合理,除非你要查询的RDS是专门用来做后台数据分析使用的,否则直接大 ...
- 【JZOJ3617】【ZJOI2014】力
╰(￣▽￣)╭ 对于100%的数据,n≤100000;0<qi<1,000,000,000. (⊙ ▽ ⊙) 令ri=1i2, 设Fj=∑j−1i=0qi∗rj−1−i,Gj=∑j−1i= ...
- POJ1485 Sumdiv
Sumdiv Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 22680 Accepted: 5660 Descripti ...
- 洛谷 P1948 [USACO08JAN]电话线Telephone Lines 最短路+二分答案
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1948 [USACO08JAN]电话线Telephone ...
- VirtualBox安装，VirtualBox安装CentOS
1.进入VirtualBox官网下载页,找到对应的版本 https://www.virtualbox.org/wiki/Downloads 按步骤安装好 2.进入CentOS官网下载页,找到对应的版本 ...
- 异步操作async await
async函数的特点: 语义化强 里面的await只能在async函数中使用 await后面的语句可以是promise对象.数字.字符串等 async函数返回的是一个Promsie对象 await语句 ...
- 2019-11-12-WPF-添加窗口消息钩子方法
title author date CreateTime categories WPF 添加窗口消息钩子方法 lindexi 2019-11-12 18:46:53 +0800 2019-06-05 ...
- 2019-1-29-jekyll-如何加密博客-防止抓取
title author date CreateTime categories jekyll 如何加密博客 防止抓取 lindexi 2019-01-29 16:26:17 +0800 2018-2- ...