css/jq--弹窗写法介绍，jq插件介绍
//html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="pop_up.css">
<script src="jquery-2.1.3.min.js"></script>
<script src="pop_up.js"></script>
</head>
<body>
<!-- <div id="corBackground" class="corBackground" style="display:block">
<div class="payMark" style="display:block;">
<div class="number-wrap">
<div class="number" style="text-align:center">此次共消费：<span>200</span><span>元</span></div>
</div>
<div class="zfb-pay"><a href="">支付宝</a></div>
<div class="wx-pay"><a href="">微信支付</a></div>
<div class="close-btn"><a href="">取消</a></div>
</div>
</div>-->
<button class="aa">点击</button>
</body>
<script>
$('.aa').bind('click', function(e) {
$('body').paybox({
//总消费(元)
Rmb: '200',
//支付宝支付链接
zfb_link: '',
//微信支付链接
wx_link: '',
//取消支付返回链接
close_link: '',
submit: function(data) {
submitFun(data);
}
});
});
</script>
</html>
//css文件pop_up.css
* {
margin: 0;
padding: 0;
}
/*去除a标签的默认样式*/
a {
text-decoration: none;
color: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none
}
a:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
/*遮罩层透明度的动画*/
@-webkit-keyframes cor_bg_anime {
0% {
background-color: rgba(0, 0, 0, 0)
}
100% {
background-color: rgba(0, 0, 0, .3)
}
}
@keyframes cor_bg_anime {
0% {
background-color: rgba(0, 0, 0, 0)
}
100% {
background-color: rgba(0, 0, 0, .3)
}
}
.corBackground {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .3);
top: 0;
left: 0;
z-index: 19;
display: none;
-webkit-animation: cor_bg_anime ease .5s;
animation: cor_bg_anime ease .5s
}
/*窗体动画，从下往上升*/
@-webkit-keyframes animations {
0% {
-webkit-transform: translate(0, 200px)
}
100% {
-webkit-transform: translate(0, 0)
}
}
@keyframes animations {
0% {
-webkit-transform: translate(0, 200px);
transform: translate(0, 200px)
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0)
}
}
.payMark {
display: none;
width: 100%;
background-color: #fff;
font-size: 0;
z-index: 1000;
position: absolute;
left: 0;
bottom: 0px;
-webkit-animation: animations .5s ease forwards;
animation: animations .5s ease forwards
}
/*---------------------窗体内容的css-------------------------*/
.number-wrap {
padding: 12px 0 23px;
font-size: 12px
}
.number {
line-height: 13px;
text-align: center
}
.number span {
color: #fb4847
}
.zfb-pay {
background-color: #1e81d2;
}
.wx-pay {
background-color: #09ba07;
}
.zfb-pay,
.wx-pay {
display: block;
width: 85.94%;
height: 37px;
margin: 0 auto;
text-align: center;
border-radius: 6px;
margin-bottom: 13px;
}
.zfb-pay a,
.wx-pay a {
display: block;
width: 100%;
height: 37px;
line-height: 37px;
margin: 0 auto;
color: #fff;
font-size: 14px;
border-radius: 6px;
}
.close-btn {
border-top: 1px solid #e8e8e8;
color: #3b3b3b;
font-size: 14px;
line-height: 14px;
text-align: center;
}
.close-btn a {
display: block;
height: 52px;
width: 100%;
line-height: 52px;
}
//js文件pop_up.js
(function($) {
$.fn.paybox = function(options) {
var defaults = {//默认参数
//总消耗(元)
Rmb: '',
//支付宝支付链接
zfb_link: '',
//微信支付链接
wx_link: '',
//取消支付返回链接
close_link: '',
submit: function(data) {}//回调函数
};
$.extend(defaults, options);//页面传入的参数替换默认参数
// var defaults = options;
var $this = $(this);
//支付弹窗内容块
var paychuanEle = $('<div id="corBackground" class="corBackground" style="display:block"><div class="payMark" style="display:block">
<div class="number-wrap"><div class="number" style="text-align:center">此次共消费：<span>' + defaults.Rmb + '</span><span>元</span></div></div>
<div class="zfb-pay"><a href="' + defaults.zfb_link + '">支付宝</a></div><div class="wx-pay"><a href="' + defaults.wx_link + '">微信支付</a></div>
<div class="close-btn"><a href="' + defaults.close_link + '">取消支付</a></div></div></div>');
//塞入窗体
$this.append(paychuanEle);
//阻止元素发生默认的行为
paychuanEle.bind('touchmove', function(e) {
e.preventDefault();
});
//hold窗体不消失
var ishanding = false;
//点击取消，窗体移除
paychuanEle.find('.close-btn').click(function(e) {
if (ishanding) {
return;
}
//console.log(e);
$("#corBackground").remove();
});
//禁止冒泡，阻止窗体移除
paychuanEle.find('.payMark').click(function(e) {
e.stopPropagation();
});
return {
//移除
fadeout: function() {
paychuanEle.remove();
},
loading: function() {
//
ishanding = true;
}
};
};
})(jQuery);
//下面我们来分析一下这个pop_js.js,到底怎么样实现这个插件的
1.定义一个闭包区域，防止插件"污染"
(function($){ ....... })(jQuery);
2.$.fn.extend(object)扩展jquery 方法，制作插件
(function($) { $.fn.paybox = function(options) {... }; })(jQuery);
3.让页面绑定插件，转入参数（如下图）
$.extend(defaults, options);//页面传入的参数替换默认参数
4.定义一个变量 var paychuanEle，窗体ele(建议先在html上写好结构和样式)
然后把窗体paychuanEle,塞入窗体 $this.append(paychuanEle);
$this指的是绑定这个插件的元素，这里绑定插件的是body，$("body").paybox({...})
