特效描述：利用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>
