基本属性：

<!DOCTYPE html>

<html>

    <head>

        <head>

        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

        <link rel="stylesheet" href="css/layer.css" media="all">

        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

        <script src="js/layer.js"></script>

    </head>

    </head>

    <body>

        <div class="clear box layer-main">

            <a href="javascript:;" onclick="test();">点我弹窗</a>

        </div>

    </body>

    <script>

    function test() {

        //在这里面输入任何合法的js语句

        layer.open({

            type: 1,

            //page层

            area: ['70%', '30%'],

            title: '弹出框',

            shade: 0.6,//遮罩透明度

            shadeClose:true,//点击遮罩关闭层

            moveType: 1,//拖拽风格，0是默认，1是传统拖动

            shift: 1,//0-6的动画形式，-1不开启

            fix:true,//不随滚动条滚动，一直在可视区域。

            border:[0],

            closeBtn:[1,true],

            content: '<div style="padding:10px;">这是一个非常普通的页面层，可以传入内容</div>',

            btn:['确定','取消']

        });

    }

</script>

</html>

我是为了测试移动端效果，才加的meta标签，可以去掉。体验pc端的效果。个人感觉pc端效果更好，移动端可以将就这用。

键: 值 描述
下表的属性都是默认值，您可在调用时按需重新配置，他们可帮助你实现各式各样的风格。如是调用： $.layer({键: 值, 键: 值, …});
type: 0 层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。

此为重要参数，不同类型层的总开关，若为type:0则不需要配置，其它类型层在调用时必须设置type。
title: '信息' 控制默认标题栏。 
如想自定义标题样式，可以 title: ['标题', 'background:#c00;'] //第二个参数可书写任意css 
如不想显示标题栏，配置title: false 即可
maxmin: false 是否输出窗口最小化/全屏/还原按钮。 
如需要开启，设置maxmin: true 即可 
此功能为layer1.8开始新增
offset: ['', ''] 控制层坐标。
offset的值分别是： [纵坐标, 横坐标]，默认为垂直水平居中
如果您要设定纵坐标，可以：offset:['200px', '']/td>
area: ['310px', '130px'] 控制层宽高。
area值分别为：[宽度, 高度]
当设置为auto时，意味着采用自适应（iframe层不能设置auto）, 对于宽度，并不推荐您设置auto。
border: [10, 0.3, '#000'] 控制层的边框。
border的值分别为：[边框大小, 透明度, 颜色, layer1.8之前需在此处加true]
如果您不想显示border，设置 border: [0] 即可
shade: [0.5, '#000'] 控制遮罩。
值分别是：[遮罩透明度, 遮罩颜色, layer1.8之前需在此处加true] 
如果不想显示遮罩，配置shade: [0]即可
shadeClose: false 用来控制点击遮罩区域是否关闭层。
若开启，设为true即可
closeBtn: [0, true] 控制层右上角关闭按钮。
closeBtn的值分别为: [关闭按钮的风格（支持0和1）, true]
若不想显示关闭按钮，配置 closeBtn: false即可
time: 0 自动关闭等待秒数，整数值。
0表示不自动关闭，若3秒后自动关闭，time: 3即可
fix: true, 用于设定层是否不随滚动条而滚动，固定在可视区域。
move: '.xubox_title' 设定某个元素来实现对层的拖拽。
值为：用来拖拽的元素选择器
若不想拖拽，move: false即可
moveOut: false 用于控制层是否允许被拖出可视窗口外
moveType: 0 用于配置拖拽类型（layer1.7之前版本不支持）
默认为引导式拖动层，若值设为1，则直接拖动层
bgcolor: '#fff' 用于控制层的背景色
如果不想设置任何颜色，设置空字符即可。但是对于type:0的对话框层而言，始终都是白色
zIndex: 19891014 控制层堆叠顺序（即css的z-index）。整数值。
合理设置它，可以避免与其它插件的层级冲突
maxWidth: 400 最大宽度。整数值。
当area宽度设为auto时才有用。
fadeIn: 300, 用于控制层渐显弹出（layer1.7之前版本不支持）
值为毫秒数
btns: 1, 按钮的个数。提供了0-2的选择，设置0表示不输出按钮
btn: ['确定', '取消'], [按钮一的文本值 , 按钮二的文本值]
必须btns值大于0才有效
shift: '', 用于控制动画弹出
有七种选择：左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。
如shift:'top' 表示从上动画弹出		 
dialog: {

    type: 3,

    msg: ''

}
信息框层模式提供的私有参数。使用时，按需配置即可 
type: 图标类型，提供了0-16的选择，也许有你喜欢的。 设置-1不显示图标 
msg: 信息框内容，重要参数		 
page: {

	dom: '#id',

	html: '',

	url: '',

	ok: function(datas){}

}
页面层模式私有参数。 
dom: 页面已存在的选择器 
html: 直接传入的html字符串。 
url: ajax请求地址。 
ok: ajax请求完毕后执行的回调，datas是异步传递过来的值。 
需要特别注意的是，dom、html、url只需设定其中一个就行，若配置html或url，你必须也配置宽高值。		 
iframe: {

    src: '',

    scrolling: 'auto'

}
iframe层模式私有参数。 
src: 要打开的网址。 
scrolling: 是否允许iframe出现滚动条，默认自动。允许：'yes'，不允许：'no'		 
loading: {

    type: 0

}
加载层私有属性。 
type: loading图标类型（提供了0-3的选择）。 
一般配合ajax使用		 
tips : {

    msg: '',

    follow: '#id',

	guide: 0,

	isGuide: true,

    more: false,

	style: ['', '']

}
tips提示层私有属性。 
msg: 提示内容。 
follow: 吸附目标选择器。 
guide: 指引方向（0：上，1：右，2：下，3：左）。 
isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon 
more: 是否允许多个tips 
style: [' color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值，为三角形的颜色。
回调函数 
success: function(layero){

}
层弹出成功后的回调函数. 
layero是回调传过来的当前层容器的实例，这意味着你可以对当前弹层进行dom操作		 
yes: function(index){}
按钮一的回调函数 
index为当前层的索引，主要用来回调执行后，配合layer.close(index)来关闭层		 
no: function(index){}
按钮二的回调函数 
close: function(index){}
层右上角关闭按钮的点击事件触发回调函数。 
end: function(){}
层被彻底关闭后执行的回调函数。 
moveEnd: function(){}
拖拽完毕触发的回调函数 
min: function(layero){},

full: function(layero){},

restore: function(layero){}
分别为最小化、全屏、还原触发后的回调函数 
layero是当前层容器的实例 
layer1.8开始新增

下面这些是为了凑字数：

<!DOCTYPE html>
<html>
<head>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="css/layer.css" media="all">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="js/layer.js"></script>
</head>
</head>
<body>
<div class="clear box layer-main">
<a href="javascript:;" onclick="test();">点我弹窗</a>
</div>
</body>
<script>
function test() {
//在这里面输入任何合法的js语句
layer.open({
type: 1,
//page层
area: ['70%', '30%'],
title: '弹出框',
shade: 0.6,//遮罩透明度
shadeClose:true,//点击遮罩关闭层
moveType: 1,//拖拽风格，0是默认，1是传统拖动
shift: 1,//0-6的动画形式，-1不开启
fix:true,//不随滚动条滚动，一直在可视区域。
border:[0],
closeBtn:[1,true],
content: '<div style="padding:10px;">这是一个非常普通的页面层，可以传入内容</div>',
btn:['确定','取消']
});
}
</script>
</html>

layer.js,,,分享一个好用的弹出层的更多相关文章

  1. 分享一个ASP.NET的弹出层，比较好用！

    网上的一些弹出层的控件多了去了,我很久之前用了一个,效果还不错,但如果应用到ASP.NET的话,会出现“弹出层内的控件runat='server'失效”的情况,具体情况我也不太会描述,但就是那些onc ...

  2. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  3. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

  4. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

  5. layer官方演示与讲解（jQuery弹出层插件）

    1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...

  6. Layer 弹出页面 在点击保存关闭弹出层

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> ...

  7. 一个简单的div弹出层的小例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. js实现鼠标右键自定义菜单(弹出层)，并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)

    <table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...

  9. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

随机推荐

  1. Context3D 不可用

    打开项目文件夹中的html-template,并找到index.template.html,右键使用TextEditor编辑,在params.allowfullscreen=”true”:后面加上pa ...

  2. 第三百五十五天 how can I 坚持

    快一年了,三百五十五天了,等写个程序算算时间,看看日期和天数能不能对的上,哈哈. 计划还是未制定,天气预报还是没有写完,立马行动,发完这个博客,立马行动. 计划:设计模式1个月,三大框架3个月,计算机 ...

  3. 第二百零三天 how can I 坚持

    空虚的有点害怕. 日复一日. 今天做了什么?下班看了个搞笑段子. 上班和刘松聊了一下午,东扯西扯的. 下班玩了两局dota. 想租车去出去玩玩,确实没有什么想去的地方了. 莫巧菲. 哎,未来好可怕啊. ...

  4. cocos2d-x中有一个JniHelper类详细使用

    主体思路 通过JNI获取java虚拟机,再获取当前程序的JNI环境,通过JNI环境获取需要调用的java类信息,再获取需要调用的java类中的函数信息.再通过JNI环境调用,使用类信息.函数信息,调用 ...

  5. 应用TcpListener实现的socket服务器端

    前言 项目中要实现一个简单的socket服务器端,采用了TcpListener这个类.除了基本的功能之外,有几处需要注意的点. 要能同时接收多个客户端的连接,当然,不需要几千个那么多. 要能探测到客户 ...

  6. 用jstack工具分析java程序

    最近做项目时遇到了一个问题,我的多个采集线程中,有一个线程经常挂起,线程并没有死掉,但是一直采集不到数据,为了解决这个问题,用到了jstack. 首先查找到java进程的pid,ps -ef|grep ...

  7. HDU2947Bicycle Puzzle（组合原理）

    题目大意: 你和朋友两人玩游戏,将一个图片均等切割成W* H块,打乱每一小块的位置.拼图游戏开始.每次,可以交换任意两块,记下交换的次数,图片还原游戏结束.得分为执行交换的次数.得分越小越好. 现在, ...

  8. HDU 5705 Clock （精度控制，暴力）

    题意:给定一个开始时间和一个角度,问你下一个时刻时针和分针形成这个角度是几点. 析:反正数量很小,就可以考虑暴力了,从第一秒开始暴力,直到那个角度即可,不会超时的,数目很少,不过要注意精度. 代码如下 ...

  9. IllegalStateException

    例1 public static void main(String[]sdf){ List<String> list = new ArrayList<String>(); li ...

  10. MyArrayList——实现自己的ArrayList！

    注:转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5965205.html ArrayList是我们常用的集合类之一,其实它的实现机制很简单,底层还是使用了一个 ...