彈窗罩缴，各式各樣，這里將常用的幾種方式封裝了一下，調(diào)用簡(jiǎn)單
Paste_Image.png
上面是demo箫章，喜歡的童學(xué)下面有下載地址噢～
使用說(shuō)明
1烙荷、調(diào)用文件
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/pop-up_layer.js"></script>、
//基本樣式檬寂，可修改美化
<link rel="stylesheet" type="text/css" href="css/pop-up_layer.css">
2奢讨、參數(shù)說(shuō)明
QQ20161122-0.png
3、看栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop-up</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/pop-up_layer.js"></script>
<link rel="stylesheet" type="text/css" href="css/pop-up_layer.css">
</head>
<body>
<!--無(wú)觸發(fā)事件彈窗-->
<div class="pop-up_layer popUp1">
<div class="layer_main">
<p class="layer_content">關(guān)注公眾號(hào)焰薄，并點(diǎn)擊關(guān)注可獲得優(yōu)惠券哦</p>
<div class="pop-up-footer">
<button class="btn_close">好</button>
</div>
</div>
</div>
<!--有觸發(fā)事件彈窗-->
<!--注意：
觸發(fā)事件按鈕必須加上：data-popUp="name"
對(duì)應(yīng)觸發(fā)事件彈窗加上：data-popUp="name"
且name值相同對(duì)應(yīng)
-->
<button class="attention-btn btn_click_up" data-popUp="btn1"type="button">關(guān)注</button>
<div class="pop-up_layer popUp" data-popUp="btn1">
<div class="layer_main">
<p class="layer_content">關(guān)注公眾號(hào)拿诸，并點(diǎn)擊關(guān)注可獲得優(yōu)惠券哦</p>
<div class="pop-up-footer">
<button class="btn_close">好</button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
//調(diào)用彈窗
/*必填三參數(shù)：
1、觸發(fā)事件按鈕的class(如果不需要事件觸發(fā)塞茅，第一個(gè)參數(shù)填popUpAuto)亩码，
2、彈窗外框class野瘦，
3描沟、彈窗彈出方式(普通：popUp-common,淡入：popUp-fade,下移：popUp-up)
*/
//自發(fā)觸發(fā)彈窗
popUp("popUpAuto","popUp1","popUp-fade");
//點(diǎn)擊觸發(fā)彈窗
$(".btn_click_up").click(function(){
popUp("btn_click_up","popUp","popUp-up");
});
//關(guān)閉彈窗
$(".btn_close").click(function(){
$(".pop-up_layer").fadeOut();
});
});
</script>
</body>
</html>
更加復(fù)雜的需求，都逃離不了最基礎(chǔ)的鞭光，希望對(duì)你有幫助
轉(zhuǎn)載請(qǐng)注明來(lái)自JillYu博客－http://write.blog.csdn.net/postlist
代碼下載地址：https://coding.net/u/Jill/p/dankal-jill/git
