css/jq--弹窗写法介绍，jq插件介绍

最新推荐文章于 2023-03-05 00:29:20 发布

xiaozhen0610

最新推荐文章于 2023-03-05 00:29:20 发布

阅读量137

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21j0h0kka1j.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

//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({...})

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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&gt
复制链接

扫一扫