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.弹出窗是 ...
随机推荐
- docker-4-Dockerfile配置文件详解
Dockerfile简单一点就是描述你这个镜像安装了哪些软件包,有哪些操作,创建了什么东西.有些人喜欢用 docker commit 命令去打包镜像,这样是不好的,首先commit出来的镜像比你使 ...
- 【洛谷P1204】【USACO1.2】挤牛奶Milking Cows
P1204 [USACO1.2]挤牛奶Milking Cows 题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶,一直到1000秒.第二个 ...
- TypeScript高级类型
交叉类型 将多个类型合并成一个类型,去两个类型的并集.与继承的区别是,继承可以有自己的属性,而交叉没有. interface DogInterface { run():void } interface ...
- MySQL学习-- UNION与UNION ALL
UNION用于把来自许多SELECT语句的结果组合到一个结果集合中,也叫联合查询. ? 1 2 3 4 5 SELECT ... UNION [ALL | DISTINCT] SELECT ... [ ...
- Swift 之类的继承与类的访问权限
http://www.cocoachina.com/swift/20160104/14821.html 上一篇博客<窥探Swift之别具一格的Struct和Class>的博客可谓是给Swi ...
- Leetcode876.Middle of the Linked List链表的中间节点
给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3,4,5] 输出:此列表中的结点 3 (序列化形式:[3,4 ...
- php_imagick是怎么实现复古效果的呢？
php_imagick程序示例 1.创建一个缩略图并显示出来 <?phpheader('Content-type: image/jpeg');$image = new Imagick('imag ...
- python自定义函数和内置函数
函数 1.定义 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 先定义,后使用 1.2分类 系统函数 自定义函数 1.3语法: def functionname(parameter ...
- Directx11教程(52) 实例(instancing)的简单应用
原文:Directx11教程(52) 实例(instancing)的简单应用 有些时候,我们需要在场景中渲染大量的重复的物体,比如体育场中的观众,森林里面的树木等等,这些物体具有相似的形状,比如很多树 ...
- 友盟iOS sdk整理
文档中心 :http://dev.umeng.com 集成文档:http://dev.umeng.com/analytics/ios-doc/integration 报表中心:http://www.u ...