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({...})
css/jq--弹窗写法介绍，jq插件介绍的更多相关文章
- sublime text 3 15个常用插件介绍
1.ColorPicker 功能:调色板(需要输入颜色时,可直接选取颜色) 使用:快捷键Windows: ctrl+shift+c 2.Emmet 功能:编码快捷键,前端必备 使用:在输入代码段后,按 ...
- 【转载】Grunt常用插件介绍
项目名称 grunt-contrib v0.8.0 项目地址 https://github.com/gruntjs/grunt-contrib 项目介绍 此项目是对grunt常用插件的集合,刚接触gr ...
- Gulp构建前端自动化工作流之：常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- sublime text3 前端插件介绍
Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法:输入标签简写形式,然后按Tab键 关于Emmet的更多介绍 ...
- Sublime Text 3前端开发常用优秀插件介绍
. 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...
- [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍
原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...
- (转)jQuery LigerUI 插件介绍及使用之ligerTree
一,简介 ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...
- subline text3常用插件介绍
常用插件介绍: html beautify(ctrl+shift+alt+f) 自动排版代码 Emmet 输入少量代码后摁Tab键,系统自动补全代码. AutoFileName 快速列出你想引用的文 ...
- Notepad++前端开发常用插件介绍
Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...
- sublime介绍常用插件和快捷键
简介 Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来的,它最初被设计为一个具有丰富扩展功能的Vim. 是一个跨平台的编辑器,同时支持Windows.Linux.M ...
随机推荐
- Python小白学习之路（十六）—【内置函数一】
将68个内置函数按照其功能分为了10类,分别是: 数学运算(7个) abs() divmod() max() min() pow() round() sum() 类型转换(24个) bo ...
- Swift Podfile中的 use_frameworks!
use_frameworks! A.用cocoapods 导入swift 框架 到 swift项目和OC项目都必须要 use_frameworks!B.使用 dynamic frameworks,必须 ...
- centos 7 初始化脚本
#!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...
- POJ 1089
#include <iostream> #include <algorithm> #define MAXN 50005 using namespace std; struct ...
- Yarn 和 Npm 命令行切换 摘录
原文作者: @Gant Laborde原文地址: https://shift.infinite.red/np...中文翻译: @文蔺译文地址:http://www.wemlion.com/2016/n ...
- Flowable BPMN 简单使用
1.Flowable是什么? Flowable是一个使用Java编写的轻量级业务流程引擎.Flowable流程引擎可用于部署BPMN 2.0流程定义(用于定义流程的行业XML标准), 创建这些流程定义 ...
- (转)MySQL字段类型详解
MySQL字段类型详解 原文:http://www.cnblogs.com/100thMountain/p/4692842.html MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间 ...
- 关于符号Symbol第一篇
Symbol类的一个实例代表一个符号.对于语法树来说,并不是每个节点都有一个符号实例.下面列举了哪些语法树节点具有符号的引用,如下表格: 其中JCNewClass.JCAssignOp.JCUnary ...
- Python -- Gui编程 -- MFC的使用
1.消息框 mfcDialog.py import win32ui import win32con from pywin.mfc import dialog class MyDialog(dialog ...
- 删除none 的images报错 image has dependent child images 解决办法
这个错是因为在要删除的images之后创建了该images的父images 方法: docker image inspect --format='{{.RepoTags}} {{.Id}} {{.Pa ...