利用jQuery實現自定義彈窗功能插件



14 54 19



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



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 提示框/彈出層
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 佳豪棋牌 足球14场胜负彩开奖结果 山东麻将258胡牌下载 足球盘囗水位入门 福彩3d走势图综合版 捷克酷喜乐彩铅怎么样 自制赚钱软件 双色球0至9尾走势图 哒哒运动怎么能多赚钱 欧美股票指数 辽宁快乐12彩预测专家 玩哪个直播间好赚钱 免费麻将游戏单机版 江苏时时彩视频直播 江西快3最大遗漏 内蒙古快三下期预测