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 ...
随机推荐
- getopt() getopt_long()函数手册[中文翻译]
getopt()函数 getopt_long函数 函数原型(function prototype) #include <unistd.h> int getopt(int argc, cha ...
- [JavaScript] css将footer置于页面最底部
<!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...
- [Dart]语法基础
此页面向您展示如何使用每个主要Dart功能,从变量和运算符到类和库,假设您已经知道如何使用其他语言编程. 要了解有关Dart核心库的更多信息,请参阅 Dart Libraries之旅.无论何时需要有关 ...
- jvm(2)类的初始化(二）和实例化
深入理解Java对象的创建过程:类的初始化与实例化 对象实例化内存分析: 对内存分配情况分析最常见的示例便是对象实例化: Object obj = new Object(); 这段代码的执行会涉及ja ...
- Swift 使用 #warning
swift 中没法使用#Warning来提示警告, 可以通过给TODO: FIXME:加上警告, 实现类似的效果. Build Phases ---> Run Script ---> ad ...
- 配置文件备份方案（expect+shell）
需求描述:备份所有线上服务器squid.httpd.mysql.nginx的配置文件 环境:在公司内网采用expect+shell脚本模式,进行批量备份.expect脚本通过ssh登录服务器,从本地c ...
- tensorflow进阶篇-3
#-*- coding:utf-8 -*- #Tensorflow的嵌入Layer import numpy as np import tensorflow as tf sess=tf.Session ...
- spring boot整合RabbitMQ（Direct模式）
springboot集成RabbitMQ非常简单,如果只是简单的使用配置非常少,springboot提供了spring-boot-starter-amqp项目对消息各种支持. Direct Excha ...
- 使用SharedPreference保存用户数据的步骤
1. 声明 SharedPreferences sp; 2. 初始化 sp = this.getSharedPreferences("文件名", 0);//0代表的是私有 3. 获 ...
- AndroidStudio报错Software caused connection abort: recv failed
Software caused connection abort: recv failed 这个问题网上有一种说法 已知会导致这种异常的一个场景如下: 客户端和服务端建立tcp的短连接,每次客户端发送 ...