jquery弹出层
这是一个弹出层的插件，有时候做东西的，经常会用到了，所以在次发一下，和大家分享一下！
[task]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.6.js" type="text/javascript"></script>
<link href="lyz.layer.css" rel="stylesheet" type="text/css" />
<script src="lyz.layer.min.js" type="text/javascript"></script>
<style type="text/css">
body{font-size: 12px;}
h1{text-align: center;}
#div1{display: none;}
.PopContainer{width: 300px;height: 200px;background-color: Yellow;text-align: center;}
.table{width: 100%;border-collapse: collapse;border: 1px solid #999;margin: 5px 0;}
.table caption{background: #CBCBB1;line-height: 30px;border: 1px solid #999;font-weight: bold;}
.table th{border: 1px solid #999;text-align: center;line-height: 22px;}
.table td{border: 1px solid #999;}
.table td.example{text-align: right;}
.table td.code{text-indent: 10px;background: #eee;}
.table td.remark{text-indent: 10px;line-height: 22px;}
</style>
<script type="text/javascript">
$(function () {
$("#btnAlert").click(function () {
$.alert({
msg: "这是调用$.alert弹出信息"
});
});
$("#btnRight").click(function () {
$.right();
});
$("#btnError").click(function () {
$.error();
});
$("#btnConfirm").click(function () {
$.confirm({
callback: function (result) {
if (result) {
alert("您选择了\"确定\"");
}
else {
alert("您选择了\"取消\"");
}
}
});
});
$("#btnContainer").click(function () {
$.container({
targetId: "#div1",
width: 300,
height: 200
});
});
$("#btnFrame").click(function () {
$.frame({
pageUrl: "http://www.baidu.com/",
width: 700,
height: 500
});
});
$("#btnCustom").click(function () {
$.custom({
content: "<div style='text-align: center;'>hello lyz!</div>",
width: 150,
height: 100
});
});
});
</script>
</head>
<body>
<h1>
lyz.layer1.0弹层插件API</h1>
<div id="div1">
<div class="PopContainer">
这是一个用于弹出的层
<br />
<br />
<br />
<a onclick="CloseLayer();">关闭</a>
</div>
</div>
<table class='table'>
<caption>
实例演示</caption>
<tr align='center'>
<th width="120">
示例
</th>
<th>
最简洁的调用
</th>
<th>
备注
</th>
</tr>
<tr>
<td class="example">
<button id="btnAlert" type="button">
提示信息</button>
</td>
<td class='code'>
$.alert({ msg: "这是调用$.alert弹出信息" });
</td>
<td class="remark">
专有属性：msg(可选)、callback(可选)
</td>
</tr>
<tr>
<td class="example">
<button id="btnRight" type="button">
成功信息</button>
</td>
<td class='code'>
$.right();
</td>
<td class="remark">
专有属性：msg(可选)、callback(可选)
</td>
</tr>
<tr>
<td class="example">
<button id="btnError" type="button">
错误信息</button>
</td>
<td class='code'>
$.error();
</td>
<td class="remark">
专有属性：msg(可选)、callback(可选)
</td>
</tr>
<tr>
<td class="example">
<button id="btnConfirm" type="button">
询问信息</button>
</td>
<td class='code'>
$.confirm({ callback: function (result) { if (result) { alert("您选择了\"确定\""); } else
{ alert("您选择了\"取消\""); } } });
</td>
<td class="remark">
专有属性：msg(可选)、callback(可选)
</td>
</tr>
<tr>
<td class="example">
<button id="btnContainer" type="button">
普通弹层</button>
</td>
<td class='code'>
$.container({ targetId: "#div1", width: 300, height: 200 });
</td>
<td class="remark">
专有属性：targetId(必选)
</td>
</tr>
<tr>
<td class="example">
<button id="btnFrame" type="button">
iframe弹窗</button>
</td>
<td class='code'>
$.frame({ pageUrl: "http://www.baidu.com/", width: 700, height: 500 });
</td>
<td class="remark">
专有属性：pageUrl(必选)
</td>
</tr>
<tr>
<td class="example">
<button id="btnCustom" type="button">
自定义弹出</button>
</td>
<td class='code'>
$.custom({ content: "<div style='text-align: center;'>hello lyz!</div>",
width: 150, height: 100 });
</td>
<td class="remark">
自定义调用
</td>
</tr>
</table>
<br />
<table class='table'>
<caption>
公共属性</caption>
<tr align='center'>
<th width="120">
基本参数
</th>
<th>
说明
</th>
</tr>
<tr>
<td class="example">
icon
</td>
<td class="remark">
弹出的标题图标(图标路径)
</td>
</tr>
<tr>
<td class="example">
title
</td>
<td class="remark">
弹出的标题文本
</td>
</tr>
<tr>
<td class="example">
width
</td>
<td class="remark">
弹出的层的宽度(默认：0)
</td>
</tr>
<tr>
<td class="example">
height
</td>
<td class="remark">
弹出的层的高度(默认：0)
</td>
</tr>
<tr align='center'>
<th width="120">
样式参数
</th>
<th>
</th>
</tr>
<tr>
<td class="example">
background
</td>
<td class="remark">
遮罩层背景色(默认：#000(黑色))
</td>
</tr>
<tr>
<td class="example">
opacity
</td>
<td class="remark">
透明度(0：完全透明；1：不透明，默认：0.5)
</td>
</tr>
<tr>
<td class="example">
duration
</td>
<td class="remark">
三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)，(默认:"normal")
</td>
</tr>
<tr>
<td class="example">
showTitle
</td>
<td class="remark">
是否显示标题(默认：true)
</td>
</tr>
<tr>
<td class="example">
dragOpacity
</td>
<td class="remark">
drag为true时，拖动弹层时的透明度(默认：1(不透明))
</td>
</tr>
<tr align='center'>
<th width="120">
动作参数
</th>
<th>
</th>
</tr>
<tr>
<td class="example">
escClose
</td>
<td class="remark">
是不可以按下“ESC”关闭(默认：true)
</td>
</tr>
<tr>
<td class="example">
masksClose
</td>
<td class="remark">
是否可以点击遮罩层关闭 (默认：false)
</td>
</tr>
<tr>
<td class="example">
drag
</td>
<td class="remark">
是否可以拖动弹层(暂不支持IE6，默认：false)
</td>
</tr>
</table>
<table class='table'>
<caption>
公共方法</caption>
<tr align='center'>
<th width="120">
名称
</th>
<th>
说明
</th>
</tr>
<tr>
<td class="example">
CloseLayer();
</td>
<td class="remark">
调用关闭弹层，一般用于弹出层内触发关闭调用(如果$.frame()里的页面内调用，则为：window.parent.CloseLayer();)
</td>
</tr>
</table>
<table class='table'>
<caption>
要求</caption>
<tr align='center'>
<th width="120">
名称
</th>
<th>
说明
</th>
</tr>
<tr>
<td class="example">
jquery-1.6.js
</td>
<td class="remark">
该插件基于jquery1.6框架开发，请在调用前务必先引用jquery1.6或以上文件
</td>
</tr>
</table>
</body>
</html>
[/task]
其中的外部连接的有两个js文件，一个jquery（jquery1.6或以上文件），请自备，另外是一个文件的地址是：lyz.layer.min
css样式文件为：
[task].masks{ width:100%; height:100%; position:fixed; _position:absolute; top:0; left:0; display:none}
.wait{ position:fixed;_position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; background-image:url("images/loading.gif")}
.popMain{ border:1px solid #ccc; position:fixed; _position:absolute; overflow:hidden; display:none; font-size:12px}
.popTitle{ border-bottom:1px solid #ccc; background:#EFEFEF; height:28px; line-height:28px; display:none}
.popTitle .text{ float:left; margin-left:6px;}
.popTitle .icon{ float:left; margin:6px 0 0 6px; width:16px; height:16px;}
.popTitle .close{ float:right; margin:9px 8px 0 0; width:10px; height:10px; background:url(images/close.png) no-repeat; cursor:pointer}
.popContent{ background:#fff; overflow:auto}
.layer_msg{ padding:0 10px 0 110px}
.layer_msg p{ line-height:18px; padding:25px 0 20px; margin:0}
.layer_msg .but{ width:100%; text-align:right; bottom:10px}
.layer_msg .but button{ width:62px; height:24px; line-height:24px; border:none; cursor:pointer; background:url(images/but.png); margin-left:10px}
.layer_msg .but button:hover{ background-position:0 -43px}
.layer_msg .but button:active{ background-position:0 -83px}
.alert_icon{ background:#fff url(images/alert.gif) no-repeat 35px 22px}
.right_icon{ background:#fff url(images/right.gif) no-repeat 35px 22px}
.error_icon{ background:#fff url(images/error.gif) no-repeat 35px 22px}
.confirm_icon{ background:#fff url(images/confirm.gif) no-repeat 35px 22px}
[/task]
另外有一些图片：
[gallery link="file"]
