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 ο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
總結
- 上一篇： 北京环球影城威震天拍照多少钱
- 下一篇： struts2学习笔记二--准备stru