今天要共享一款基于jQuery1.6的弹层插件lyz.layer1.0,该能在浏览器界面上显示非常好的体验效果,它可以通过配置不同属性来实现多样功能化,含:弹信息框、弹出层、弹窗口、弹出HTML代码等等。
详细JS调用代码如下:
详细属性说明:
示例 | 最简洁的调用 | 备注 |
---|---|---|
提示信息 | $.alert({ msg: "这是调用$.alert弹出信息" }); | 专有属性:msg(可选)、callback(可选) |
成功信息 | $.right(); | 专有属性:msg(可选)、callback(可选) |
错误信息 | $.error(); | 专有属性:msg(可选)、callback(可选) |
询问信息 | $.confirm({ callback: function (result) { if (result) { alert("您选择了/"确定/""); } else { alert("您选择了/"取消/""); } } }); | 专有属性:msg(可选)、callback(可选) |
普通弹层 | $.container({ targetId: "#div1", width: 300, height: 200 }); | 专有属性:targetId(必选) |
iframe弹窗 | $.frame({ pageUrl: "http://www.baidu.com/", width: 700, height: 500 }); | 专有属性:pageUrl(必选) |
自定义弹出 | $.custom({ content: "<div style='text-align: center;'>hello lyz!</div>", width: 150, height: 100 }); | 自定义调用 |
基本参数 | 说明 |
---|---|
icon | 弹出的标题图标(图标路径) |
title | 弹出的标题文本 |
width | 弹出的层的宽度(默认:0) |
height | 弹出的层的高度(默认:0) |
样式参数 | |
background | 遮罩层背景色(默认:#000(黑色)) |
opacity | 透明度(0:完全透明;1:不透明,默认:0.5) |
duration | 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),(默认:"normal") |
showTitle | 是否显示标题(默认:true) |
dragOpacity | drag为true时,拖动弹层时的透明度(默认:1(不透明)) |
动作参数 | |
escClose | 是不可以按下“ESC”关闭(默认:true) |
masksClose | 是否可以点击遮罩层关闭 (默认:false) |
drag | 是否可以拖动弹层(暂不支持IE6,默认:false) |
名称 | |
CloseLayer(); | 调用关闭弹层,一般用于弹出层内触发关闭调用(如果$.frame()里的页面内调用,则为:window.parent.CloseLayer();) |