这是一个弹出层的插件，有时候做东西的，经常会用到了，所以在次发一下，和大家分享一下！ [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 οnclick="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"]
转载于:https://www.cnblogs.com/asqq/archive/2012/09/05/3194927.html
)
![[转 scrum] 大型项目开发使用敏捷是否合适？不该问的问题](http://pic.xiahunao.cn/[转 scrum] 大型项目开发使用敏捷是否合适？不该问的问题)