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.弹出窗是 ...
随机推荐
- JAVA Sftp 上传下载
SftpUtils package xxx;import com.jcraft.jsch.Channel; import com.jcraft.jsch.ChannelSftp; import com ...
- Vue--vue中常用的ECMAScript6语法
1.对象的写法 es5中对象: {add:add,substrict:substrict} es6中对象: {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写,否则要 ...
- ubuntu安装verilog
1.安装verilog sudo apt-get install verilog 2.安装gtkwave sudo apt-get install gtkwave 3.安装dinotrace(和gtk ...
- 官网svn提交到代码库，但是不能同步到web目录
现象:数据库名字存在,但是数据库中表为空:svn提交代码能到svn库中,但不能同步到web目录. 原因:磁盘分区满了,导致内测服务器中数据库先删掉但没能从线上拉取回来,显示数据库中表为空: 磁盘满,导 ...
- Python运用于数据分析的简单教程
Python运用于数据分析的简单教程 这篇文章主要介绍了Python运用于数据分析的简单教程,主要介绍了如何运用Python来进行数据导入.变化.统计和假设检验等基本的数据分析,需要的朋友可以参考下 ...
- ubuntu上将常用程序拖到左侧栏目
- 如何在Liferay 7中用html显示页面
liferay portlet默认的显示页面是view.jsp,虽然可以在jsp中用include标签包括html文件,但是如何直接通过修改配置文件让默认的显示页面为view.html呢? 1.用Li ...
- Future Maker | 领跑亚太 进击的阿里云数据库
7月31日,阿里云马来西亚峰会在吉隆坡召开,阿里巴巴集团副总裁.阿里云智能数据库事业部总裁李飞飞在演讲中表示:“作为亚太地区第一的云服务提供商,阿里云数据库已为多家马来西亚知名企业提供技术支持,助力企 ...
- python中的输入和输出
输入和输出 输出: 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, ...
- ELK之elasticsearch安装&&kibana安装
1.ES和Kibana安装都是开箱即用的? 解压缩就可以用 elasticsearch解压缩之后,双击下图中的elasticsearch.bat,启动,kibana也是一样 双击之后, 我们看到上图有 ...