特效描述:利用jQuery實現 自定義 彈窗功能 插件,利用jQuery實現自定義彈窗功能插件
代碼結構
1. 引入CSS
<link rel="stylesheet" href="css/animate.min.css" /> <link rel="stylesheet" href="syalert/syalert.min.css" /> <link rel="stylesheet" href="css/animate.min.css" /> <link rel="stylesheet" href="syalert/syalert.min.css" />
2. 引入JS
<script type="text/javascript" src="js/jquery.min.js"></script> <script src="syalert/syalert.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="syalert/syalert.min.js"></script>
3. HTML代碼
?<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title></title> <style type="text/css"> *{ margin:0px; padding:0px; box-sizing:border-box; } *:focus{ outline:none;} .tsm{ background:#333; font-size:13px; color:#fff; margin:20px; margin-top:0px; padding:12px; line-height:25px;} .tsm .p2{ margin-top:12px;} .btns{ padding:20px;} .btns div{ display:block; text-align:center; cursor:pointer; padding:10px; border-radius:5px; background:#0CC; color:#fff; margin-bottom:12px; width:100%;} </style> </head> <body style="background:#eee;"> <div class="btns"> <div onClick="syalert.syopen('alert1')">確認彈窗</div> <div onClick="syalert.syopen('alert2')">消息彈窗</div> <div onClick="syalert.syopen('alert3')">消息提示</div> <div onClick="syalert.syopen('alert4')">模態彈窗</div> </div> <!-- 確認彈窗 --> <div class="sy-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert1"> <div class="sy-title">溫馨提示</div> <div class="sy-content">你喜歡此插件嗎?</div> <div class="sy-btn"> <button onClick="syalert.syhide('alert1')">取消</button> <button onClick="ok('alert1')">確定</button> </div> </div> <!-- 消息彈窗 --> <div class="sy-alert sy-alert-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="alert" sy-mask="true" id="alert2"> <div class="sy-title">溫馨提示</div> <div class="sy-content">提交成功,謝謝!</div> <div class="sy-btn"> <button onClick="ok('alert2')">確定</button> </div> </div> <!-- 提示彈窗 --> <div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert3"> <div class="sy-content">請輸入姓名</div> </div> <!-- 自定義彈窗 --> <div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert4"> <div class="sy-title">用戶注冊</div> <div class="sy-content"> <div class="form"> <p class="input-item"><input type="text" placeholder="請輸入手機號" /></p> <p class="input-item"><input type="text" placeholder="請輸入驗證碼" /><button class="getcode">獲取驗證碼</button></p> <p class="input-item"><input type="text" placeholder="請輸入郵箱" /></p> <p class="input-item"><input type="text" placeholder="請輸入地址" /></p> <p class="input-item"><input type="text" placeholder="請輸入QQ" /></p> <p class="input-item"><input type="text" placeholder="請輸入傳真" /></p> </div> </div> <div class="sy-btn"> <button onClick="syalert.syhide('alert4')">取消</button> <button onClick="ok('alert4')">確定</button> </div> </div> <div class="tsm"> <p>syalert.js 使用插件請參考index.html 里面的例子,插件依賴jquery,animate.css</p> <p class="p2">html 不會自動創建,請將上面彈窗HTML結構搬到自己網頁</p> <p class="p2">具體使用方法: <p>打開彈窗 syalert.syopen(id)</p> <p>關閉彈窗 syalert.syhide(id)</p> <p>其中id為彈窗自定義的ID</p> <p class="p2">關于動畫請直接在html上定義<p> <p>進入動畫定義:sy-enter="zoomIn"</p> <p>離開動畫 sy-leave="zoomOut"<p> <p>其中 zoomIn和zoomOut是 animate.css里面的動畫名稱。可以將動畫名稱更改為animate.css里面的動畫名稱,動畫就變了哦。 </p> </div> <script> function ok(id){ syalert.syhide(id); } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>