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.弹出窗是 ...
随机推荐
- json原生解析
身为新手,在运用网络解析json数据的时候,发现先会用Gson等框架解析json,然后就懒起来学原生解析了,这下在看别人写的demo的时候就尴尬了,一块块的,不懂写什么,气氛十分尴尬. 不多说,先来条 ...
- HTML之meta标签缓存控制
<meta http-equiv="pragram" content="no-cache"> 禁止浏览器从本地缓存中调阅页面. 网页不保存在缓存中, ...
- 【JZOJ4710】【NOIP2016提高A组模拟8.17】Value
题目描述 输入 输出 样例输入 5 8 2 10 7 5 1 11 8 13 3 样例输出 27 数据范围 解法 选定一些物品a[1],a[2],a[3]-a[num],尝试交换a[i],a[j],那 ...
- PHP数据加密和解密
encrypt.php <?php /** * Passport 加密函数 * * @param string 等待加密的原字串 * @param string 私有密匙(用于解密和加密) * ...
- 求x！在k进制下后缀零的个数（洛谷月赛T1）
求x!在k进制下后缀和的个数 20分: 求十进制下的x!后缀和的个数 40分: 高精求阶乘,直接模拟过程 (我不管反正我不打,本蒟蒻最讨厌高精了) 60分 利用一个定理(网上有求x!在 ...
- BOT建设经营转让,PPP公私合作
PPP.BOT两种模式有什么区别? BOT模式(build-operate-transfer),由投资方建设并专营一定期限最后移交政府的方式:PPP模式(public-private-partners ...
- SpringBoot Actuator监控【转】
springboot actuator 监控 springboot1.5和springboot2.0 的actuator在启动日志上的差异就很大了. springboot1.5在启动时会打印很多/XX ...
- Directx11教程(4) 一个最基本D3D应用程序(2)
原文:Directx11教程(4) 一个最基本D3D应用程序(2) 接着上篇教程的代码,本篇加入基本的D3D代码,实现一个完整的D3D11程序框架. 我们增加一个新类D3DClass, 用来处理3D渲 ...
- Activity基本类分析
先上一张类图. Android源码分析的文章在网络上已经很多, 有些知识点阅读完之后能够基本理解其框架,但是由于不是这些代码的维护者,所以过一段时间后就忘记的差不多了,又需要反复学习. 所以在读完文章 ...
- Guitar
nuomi N3380614240045529680 N3380614240167717364 1404679948665073 装修风格: http://www.douban.com/group/t ...