弹窗
2016-11-22 本文已影响0人
Jill1231
弹窗，各式各样，这里将常用的几种方式封装了一下，调用简单
Paste_Image.png
上面是demo，喜欢的童学下面有下载地址噢～
使用说明
1、调用文件
<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、参数说明
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>
<!--无触发事件弹窗-->
<div class="pop-up_layer popUp1">
<div class="layer_main">
<p class="layer_content">关注公众号，并点击关注可获得优惠券哦</p>
<div class="pop-up-footer">
<button class="btn_close">好</button>
</div>
</div>
</div>
<!--有触发事件弹窗-->
<!--注意：
触发事件按钮必须加上：data-popUp="name"
对应触发事件弹窗加上：data-popUp="name"
且name值相同对应
-->
<button class="attention-btn btn_click_up" data-popUp="btn1"type="button">关注</button>
<div class="pop-up_layer popUp" data-popUp="btn1">
<div class="layer_main">
<p class="layer_content">关注公众号，并点击关注可获得优惠券哦</p>
<div class="pop-up-footer">
<button class="btn_close">好</button>
</div>
</div>
</div>
<script>
$(document).ready(function () {
//调用弹窗
/*必填三参数：
1、触发事件按钮的class(如果不需要事件触发，第一个参数填popUpAuto)，
2、弹窗外框class，
3、弹窗弹出方式(普通：popUp-common,淡入：popUp-fade,下移：popUp-up)
*/
//自发触发弹窗
popUp("popUpAuto","popUp1","popUp-fade");
//点击触发弹窗
$(".btn_click_up").click(function(){
popUp("btn_click_up","popUp","popUp-up");
});
//关闭弹窗
$(".btn_close").click(function(){
$(".pop-up_layer").fadeOut();
});
});
</script>
</body>
</html>
更加复杂的需求，都逃离不了最基础的，希望对你有帮助
转载请注明来自JillYu博客－http://write.blog.csdn.net/postlist
代码下载地址：https://coding.net/u/Jill/p/dankal-jill/git
