mirror of
https://github.com/zhaoolee/ChineseBQB.git
synced 2026-01-12 13:44:56 +08:00
zhaoolee commit
This commit is contained in:
zhaoolee
7
cdn/clipboard.min.js
vendored
Executable file
7
cdn/clipboard.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
237
cdn/dialog.bundle.js
Executable file
237
cdn/dialog.bundle.js
Executable file
@@ -0,0 +1,237 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // identity function for calling harmony imports with the correct context
|
||||
/******/ __webpack_require__.i = function(value) { return value; };
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
;(function($){
|
||||
var Dialog = function (cfg){
|
||||
this.config = {
|
||||
width:180,
|
||||
height:150,
|
||||
msg:'操作成功',
|
||||
winDom:window,
|
||||
delay:0,
|
||||
bg:true,
|
||||
bgWhite:false,
|
||||
clickDomCancel:false,
|
||||
callback:null,
|
||||
type:"success"
|
||||
}
|
||||
|
||||
$.extend(this.config,cfg);
|
||||
|
||||
// 容器存在就返回
|
||||
if (Dialog.prototype.modelBox ) return;
|
||||
|
||||
this.render(this.config.type);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
//在闭包区域内 将Dialog暴露出去
|
||||
window.Dialog = Dialog;
|
||||
|
||||
//定义外层
|
||||
//modelBox盒子 内容区域的外层容器
|
||||
Dialog.prototype.modelBox = null;
|
||||
|
||||
Dialog.prototype.render = function(type){
|
||||
|
||||
//初始渲染容器
|
||||
this.renderUI(type);
|
||||
|
||||
//绑定事件
|
||||
this.clickDom();
|
||||
|
||||
//初始化盒子大小
|
||||
this.initBox();
|
||||
|
||||
Dialog.prototype.modelBox.appendTo(this.config.winDom.document.body);
|
||||
};
|
||||
|
||||
//初始渲染
|
||||
Dialog.prototype.renderUI = function(type){
|
||||
Dialog.prototype.modelBox = $("<div id='animationTipBox'></div>");
|
||||
|
||||
//提示类型 判断
|
||||
type == "load" && this.loadRender();
|
||||
type == "success" && this.successRender();
|
||||
type == "error" && this.errorRender();
|
||||
type == "tip" && this.tipRender();
|
||||
|
||||
|
||||
|
||||
//是否显示遮罩
|
||||
if(this.config.bg){
|
||||
this.config.bgWhite ? this._mask = $("<div class='mask_white'></div>") : this._mask = $("<div class='mask'></div>");
|
||||
this._mask.appendTo(this.config.winDom.document.body);
|
||||
}
|
||||
|
||||
//config.delay 定时遮罩消失
|
||||
_this_ = this;
|
||||
!this.config.delay && typeof this.config.callBack === "function" && (this.config.delay = 1);
|
||||
this.config.delay && setTimeout(function(){_this_.close();},_this_.config.delay);
|
||||
|
||||
|
||||
};
|
||||
|
||||
Dialog.prototype.clickDom = function(){
|
||||
var _this = this;
|
||||
|
||||
//点击空白立即取消
|
||||
this.config.clickDomCancel && this._mask && this._mask.click(function(){_this.close();});
|
||||
};
|
||||
|
||||
Dialog.prototype.initBox = function(){
|
||||
Dialog.prototype.modelBox.css({
|
||||
width : this.config.width+'px',
|
||||
height : this.config.height+'px',
|
||||
marginLeft : "-"+(this.config.width/2)+'px',
|
||||
marginTop : "-"+(this.config.height/2)+'px'
|
||||
});
|
||||
};
|
||||
|
||||
//成功效果
|
||||
Dialog.prototype.successRender = function(){
|
||||
var suc = "<div class='success'>";
|
||||
suc +=" <div class='icon'>";
|
||||
suc += "<div class='line_short'></div>";
|
||||
suc += "<div class='line_long'></div> ";
|
||||
suc += "</div>";
|
||||
suc +=" <div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
suc += "</div>";
|
||||
Dialog.prototype.modelBox.append(suc);
|
||||
};
|
||||
|
||||
//加载效果
|
||||
Dialog.prototype.loadRender = function(){
|
||||
var load = "<div class='load'>";
|
||||
load += "<div class='icon_box'>";
|
||||
for(var i = 1; i < 4; i++ ){
|
||||
load += "<div class='cirBox"+i+"'>";
|
||||
load += "<div class='cir1'></div>";
|
||||
load += "<div class='cir2'></div>";
|
||||
load += "<div class='cir3'></div>";
|
||||
load += "<div class='cir4'></div>";
|
||||
load += "</div>";
|
||||
}
|
||||
load += "</div>";
|
||||
load += "</div>";
|
||||
load += "<div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
Dialog.prototype.modelBox.append(load);
|
||||
};
|
||||
|
||||
//提示效果
|
||||
Dialog.prototype.tipRender = function(){
|
||||
var tip = "<div class='tip'>";
|
||||
tip +=" <div class='icon'>i</div>";
|
||||
tip +=" <div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
tip += "</div>";
|
||||
Dialog.prototype.modelBox.append(tip);
|
||||
};
|
||||
|
||||
//错误效果
|
||||
Dialog.prototype.errorRender = function(){
|
||||
var err = "<div class='lose'>";
|
||||
err += " <div class='icon'>";
|
||||
err += " <div class='icon_box'>";
|
||||
err += " <div class='line_left'></div>";
|
||||
err += " <div class='line_right'></div>";
|
||||
err += " </div>";
|
||||
err += " </div>";
|
||||
err += "<div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
err += "</div>";
|
||||
Dialog.prototype.modelBox.append(err);
|
||||
};
|
||||
|
||||
//关闭
|
||||
Dialog.prototype.close = function(){
|
||||
Dialog.prototype.destroy();
|
||||
this.destroy();
|
||||
this.config.delay && typeof this.config.callBack === "function" && this.config.callBack();
|
||||
};
|
||||
|
||||
//销毁
|
||||
Dialog.prototype.destroy = function(){
|
||||
this._mask && this._mask.remove();
|
||||
Dialog.prototype.modelBox && Dialog.prototype.modelBox.remove();
|
||||
Dialog.prototype.modelBox = null;
|
||||
};
|
||||
|
||||
//函数传递
|
||||
|
||||
popup = function(cfg){
|
||||
return new Dialog(cfg);
|
||||
}
|
||||
|
||||
})(Zepto);
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
664
cdn/dialog.css
Executable file
664
cdn/dialog.css
Executable file
@@ -0,0 +1,664 @@
|
||||
// =============================================
|
||||
// @des: dialog.less
|
||||
// @author: shaotianyu
|
||||
// @time: 2017-03-19
|
||||
// =============================================
|
||||
|
||||
@charset "utf-8";
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.body {
|
||||
font-family: 14px "Microsoft Yahei", "微软雅黑", Arial, Tahoma;
|
||||
}
|
||||
.btn-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
justify-content: space-around;
|
||||
-webkit-justify-content: space-around;
|
||||
-moz-justify-content: space-around;
|
||||
}
|
||||
.btn-container input[type='button'] {
|
||||
width: 20%;
|
||||
padding: 0.357rem;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
-webkit-radius: 3px;
|
||||
-moz-radius: 3px;
|
||||
background-color: #3B9DFF;
|
||||
}
|
||||
.btn-container input[type='button']:active {
|
||||
background-color: #1966b3;
|
||||
}
|
||||
/*重置盒模型 */
|
||||
.boxContent * {
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
/*animation start*/
|
||||
#animationTipBox {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -90px;
|
||||
margin-top: -75px;
|
||||
z-index: 1001;
|
||||
-webkit-animation: alertAnimation 0.3s ease-in-out 0s 1;
|
||||
-moz-animation: alertAnimation 0.3s ease-in-out 0s 1;
|
||||
animation: alertAnimation 0.3s ease-in-out 0s 1;
|
||||
}
|
||||
#animationTipBox * {
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
#animationTipBox .icon {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
border: 4px solid #66cc33;
|
||||
margin: 15px auto 5px auto;
|
||||
}
|
||||
#animationTipBox .icon_box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
#animationTipBox .lose .icon {
|
||||
border-color: #FF9090;
|
||||
}
|
||||
#animationTipBox .lose .icon_box {
|
||||
-webkit-animation: lose_Animation 0.5s ease 0s 1;
|
||||
-moz-animation: lose_Animation 0.5s ease 0s 1;
|
||||
animation: lose_Animation 0.5s ease 0s 1;
|
||||
}
|
||||
#animationTipBox .dec_txt {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
padding: 5px 0 10px 0;
|
||||
}
|
||||
.tip .icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #66cc33;
|
||||
border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
color: #fff;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
.success .line_short {
|
||||
width: 25px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 46px;
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
background-color: #66cc33;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-animation: success_short_Animation 0.65s ease 0s 1;
|
||||
-moz-animation: success_short_Animation 0.65s ease 0s 1;
|
||||
animation: success_short_Animation 0.65s ease 0s 1;
|
||||
}
|
||||
.success .line_long {
|
||||
width: 47px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
background-color: #66cc33;
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-webkit-animation: success_long_Animation 0.65s ease 0s 1;
|
||||
-moz-animation: success_long_Animation 0.65s ease 0s 1;
|
||||
animation: success_long_Animation 0.65s ease 0s 1;
|
||||
}
|
||||
.lose .line_left,
|
||||
.lose .line_right {
|
||||
width: 47px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
left: 17px;
|
||||
top: 37px;
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
background-color: #FF9090;
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
}
|
||||
.lose .line_right {
|
||||
right: 11px;
|
||||
top: 37px;
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
}
|
||||
/* 总体动画 函数 */
|
||||
/*all animate*/
|
||||
@-webkit-keyframes alertAnimation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.5);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: scale(1.25);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes alertAnimation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.5);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: scale(1.25);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes alertAnimation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.5);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: scale(1.25);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
/*all animate*/
|
||||
/*success short animate*/
|
||||
@-webkit-keyframes success_short_Animation {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -4px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes success_short_Animation {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -4px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes success_short_Animation {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -4px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
/*success short animate*/
|
||||
/*success long animate*/
|
||||
@-webkit-keyframes success_long_Animation {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes success_long_Animation {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes success_long_Animation {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
/*success long animate*/
|
||||
/*load_Animation*/
|
||||
@-webkit-keyframes load_Animation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.15);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes load_Animation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.15);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes load_Animation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.15);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
/*load_Animation*/
|
||||
/*lose_Animation*/
|
||||
@-webkit-keyframes lose_Animation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.15);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes lose_Animation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.15);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes lose_Animation {
|
||||
0% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.6);
|
||||
opacity: 0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.15);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
/*lose_Animation*/
|
||||
.load {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
border: 4px solid #fff;
|
||||
margin: 15px auto 5px auto;
|
||||
top: 10px;
|
||||
}
|
||||
.load .icon_box {
|
||||
margin: 10px auto;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.load .cirBox1,
|
||||
.load .cirBox2,
|
||||
.load .cirBox3 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.load .cirBox1 > div,
|
||||
.load .cirBox2 > div,
|
||||
.load .cirBox3 > div {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
background-color: #ccc;
|
||||
position: absolute;
|
||||
}
|
||||
.load .cirBox1 {
|
||||
transform: rotate(30deg);
|
||||
-webkit-transform: rotate(30deg);
|
||||
-moz-transform: rotate(30deg);
|
||||
}
|
||||
.load .cirBox2 {
|
||||
transform: rotate(60deg);
|
||||
-webkit-transform: rotate(60deg);
|
||||
-moz-transform: rotate(60deg);
|
||||
}
|
||||
.load .cirBox3 {
|
||||
transform: rotate(90deg);
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
}
|
||||
.load .cir1 {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.load .cir2 {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.load .cir3 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.load .cir4 {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.load .cir1,
|
||||
.load .cir2,
|
||||
.load .cir3,
|
||||
.load .cir4 {
|
||||
-webkit-animation: cir_Animation 1.2s ease 0s infinite;
|
||||
-moz-animation: cir_Animation 1.2s ease 0s infinite;
|
||||
animation: cir_Animation 1.2s ease 0s infinite;
|
||||
}
|
||||
.cirBox1 .cir2 {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
-moz-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
.cirBox1 .cir3 {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
-moz-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.cirBox1 .cir4 {
|
||||
-webkit-animation-delay: -0.5s;
|
||||
-moz-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.cirBox2 .cir2 {
|
||||
-webkit-animation-delay: -1s;
|
||||
-moz-animation-delay: -1s;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
.cirBox2 .cir3 {
|
||||
-webkit-animation-delay: -0.7s;
|
||||
-moz-animation-delay: -0.7s;
|
||||
animation-delay: -0.7s;
|
||||
}
|
||||
.cirBox2 .cir4 {
|
||||
-webkit-animation-delay: -0.4s;
|
||||
-moz-animation-delay: -0.4s;
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.cirBox3 .cir2 {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
-moz-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
.cirBox3 .cir3 {
|
||||
-webkit-animation-delay: -0.6s;
|
||||
-moz-animation-delay: -0.6s;
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
.cirBox3 .cir4 {
|
||||
-webkit-animation-delay: -0.3s;
|
||||
-moz-animation-delay: -0.3s;
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
@-webkit-keyframes cir_Animation {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
-webkit-transform: scale(0.4);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes cir_Animation {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
-webkit-transform: scale(0.4);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes cir_Animation {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
-webkit-transform: scale(0.4);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
opacity: .8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
162
cdn/dialog.js
Executable file
162
cdn/dialog.js
Executable file
@@ -0,0 +1,162 @@
|
||||
;(function($){
|
||||
var Dialog = function (cfg){
|
||||
this.config = {
|
||||
width:180,
|
||||
height:150,
|
||||
msg:'操作成功',
|
||||
winDom:window,
|
||||
delay:0,
|
||||
bg:true,
|
||||
bgWhite:false,
|
||||
clickDomCancel:false,
|
||||
callback:null,
|
||||
type:"success"
|
||||
}
|
||||
|
||||
$.extend(this.config,cfg);
|
||||
|
||||
// 容器存在就返回
|
||||
if (Dialog.prototype.modelBox ) return;
|
||||
|
||||
this.render(this.config.type);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
//在闭包区域内 将Dialog暴露出去
|
||||
window.Dialog = Dialog;
|
||||
|
||||
//定义外层
|
||||
//modelBox盒子 内容区域的外层容器
|
||||
Dialog.prototype.modelBox = null;
|
||||
|
||||
Dialog.prototype.render = function(type){
|
||||
|
||||
//初始渲染容器
|
||||
this.renderUI(type);
|
||||
|
||||
//绑定事件
|
||||
this.clickDom();
|
||||
|
||||
//初始化盒子大小
|
||||
this.initBox();
|
||||
|
||||
Dialog.prototype.modelBox.appendTo(this.config.winDom.document.body);
|
||||
};
|
||||
|
||||
//初始渲染
|
||||
Dialog.prototype.renderUI = function(type){
|
||||
Dialog.prototype.modelBox = $("<div id='animationTipBox'></div>");
|
||||
|
||||
//提示类型 判断
|
||||
type == "load" && this.loadRender();
|
||||
type == "success" && this.successRender();
|
||||
type == "error" && this.errorRender();
|
||||
type == "tip" && this.tipRender();
|
||||
|
||||
|
||||
|
||||
//是否显示遮罩
|
||||
if(this.config.bg){
|
||||
this.config.bgWhite ? this._mask = $("<div class='mask_white'></div>") : this._mask = $("<div class='mask'></div>");
|
||||
this._mask.appendTo(this.config.winDom.document.body);
|
||||
}
|
||||
|
||||
//config.delay 定时遮罩消失
|
||||
_this_ = this;
|
||||
!this.config.delay && typeof this.config.callBack === "function" && (this.config.delay = 1);
|
||||
this.config.delay && setTimeout(function(){_this_.close();},_this_.config.delay);
|
||||
|
||||
|
||||
};
|
||||
|
||||
Dialog.prototype.clickDom = function(){
|
||||
var _this = this;
|
||||
|
||||
//点击空白立即取消
|
||||
this.config.clickDomCancel && this._mask && this._mask.click(function(){_this.close();});
|
||||
};
|
||||
|
||||
Dialog.prototype.initBox = function(){
|
||||
Dialog.prototype.modelBox.css({
|
||||
width : this.config.width+'px',
|
||||
height : this.config.height+'px',
|
||||
marginLeft : "-"+(this.config.width/2)+'px',
|
||||
marginTop : "-"+(this.config.height/2)+'px'
|
||||
});
|
||||
};
|
||||
|
||||
//成功效果
|
||||
Dialog.prototype.successRender = function(){
|
||||
var suc = "<div class='success'>";
|
||||
suc +=" <div class='icon'>";
|
||||
suc += "<div class='line_short'></div>";
|
||||
suc += "<div class='line_long'></div> ";
|
||||
suc += "</div>";
|
||||
suc +=" <div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
suc += "</div>";
|
||||
Dialog.prototype.modelBox.append(suc);
|
||||
};
|
||||
|
||||
//加载效果
|
||||
Dialog.prototype.loadRender = function(){
|
||||
var load = "<div class='load'>";
|
||||
load += "<div class='icon_box'>";
|
||||
for(var i = 1; i < 4; i++ ){
|
||||
load += "<div class='cirBox"+i+"'>";
|
||||
load += "<div class='cir1'></div>";
|
||||
load += "<div class='cir2'></div>";
|
||||
load += "<div class='cir3'></div>";
|
||||
load += "<div class='cir4'></div>";
|
||||
load += "</div>";
|
||||
}
|
||||
load += "</div>";
|
||||
load += "</div>";
|
||||
load += "<div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
Dialog.prototype.modelBox.append(load);
|
||||
};
|
||||
|
||||
//提示效果
|
||||
Dialog.prototype.tipRender = function(){
|
||||
var tip = "<div class='tip'>";
|
||||
tip +=" <div class='icon'>i</div>";
|
||||
tip +=" <div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
tip += "</div>";
|
||||
Dialog.prototype.modelBox.append(tip);
|
||||
};
|
||||
|
||||
//错误效果
|
||||
Dialog.prototype.errorRender = function(){
|
||||
var err = "<div class='lose'>";
|
||||
err += " <div class='icon'>";
|
||||
err += " <div class='icon_box'>";
|
||||
err += " <div class='line_left'></div>";
|
||||
err += " <div class='line_right'></div>";
|
||||
err += " </div>";
|
||||
err += " </div>";
|
||||
err += "<div class='dec_txt'>"+this.config.msg+"</div>";
|
||||
err += "</div>";
|
||||
Dialog.prototype.modelBox.append(err);
|
||||
};
|
||||
|
||||
//关闭
|
||||
Dialog.prototype.close = function(){
|
||||
Dialog.prototype.destroy();
|
||||
this.destroy();
|
||||
this.config.delay && typeof this.config.callBack === "function" && this.config.callBack();
|
||||
};
|
||||
|
||||
//销毁
|
||||
Dialog.prototype.destroy = function(){
|
||||
this._mask && this._mask.remove();
|
||||
Dialog.prototype.modelBox && Dialog.prototype.modelBox.remove();
|
||||
Dialog.prototype.modelBox = null;
|
||||
};
|
||||
|
||||
//函数传递
|
||||
|
||||
popup = function(cfg){
|
||||
return new Dialog(cfg);
|
||||
}
|
||||
|
||||
})(Zepto);
|
||||
422
cdn/dialog.less
Executable file
422
cdn/dialog.less
Executable file
@@ -0,0 +1,422 @@
|
||||
// =============================================
|
||||
// @des: dialog.less
|
||||
// @author: shaotianyu
|
||||
// @time: 2017-03-19
|
||||
// =============================================
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// 清除浮动
|
||||
.clearfix{
|
||||
&:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}
|
||||
*zoom:1;
|
||||
}
|
||||
.radius(@radius:50%){
|
||||
border-radius:@radius;
|
||||
-webkit-border-radius:@radius;
|
||||
-moz-border-radius:@radius;
|
||||
}
|
||||
.rotate(@deg){
|
||||
transform:rotate(@deg);
|
||||
-webkit-transform:rotate(@deg);
|
||||
-moz-transform:rotate(@deg);
|
||||
}
|
||||
|
||||
.reset(){
|
||||
*{margin:0; padding:0;}
|
||||
ul,ol{list-style:none;}
|
||||
img{border:none;}
|
||||
input,select,textarea{outline:none; border:none; background:none;}
|
||||
textarea{resize:none;}
|
||||
a{text-decoration:none;}
|
||||
}
|
||||
.reset();
|
||||
|
||||
|
||||
.body{
|
||||
font-family:14px "Microsoft Yahei","微软雅黑",Arial,Tahoma;
|
||||
}
|
||||
|
||||
@globalWidth:100%;
|
||||
|
||||
.flexCenter(){
|
||||
display: flex;
|
||||
display:-webkit-flex;
|
||||
display:-moz-flex;
|
||||
justify-content:space-around;
|
||||
-webkit-justify-content:space-around;
|
||||
-moz-justify-content:space-around;
|
||||
}
|
||||
.btnStyle(@padding:0.357rem,@color:#fff,@bg:#3B9DFF,@radius:3px){
|
||||
padding:@padding;
|
||||
color:@color;
|
||||
border-radius:@radius;
|
||||
-webkit-radius:@radius;
|
||||
-moz-radius:@radius;
|
||||
background-color: @bg
|
||||
}
|
||||
.btn-container{
|
||||
width:@globalWidth;
|
||||
|
||||
.flexCenter();
|
||||
|
||||
input[type='button']{
|
||||
width:@globalWidth/5;
|
||||
.btnStyle();
|
||||
|
||||
&:active{
|
||||
background-color: #1966b3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*重置盒模型 */
|
||||
|
||||
.boxContent{
|
||||
*{
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
/*animation start*/
|
||||
@boxWidth:180px;
|
||||
#animationTipBox {
|
||||
|
||||
width:@boxWidth;
|
||||
height:auto;
|
||||
background-color:#fff;
|
||||
.radius(8px);
|
||||
position:fixed;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-@boxWidth/2;
|
||||
margin-top:-@boxWidth/2+15;
|
||||
z-index:1001;
|
||||
.animation(alertAnimation,0.3s,ease-in-out,0s,1);
|
||||
|
||||
.boxContent;
|
||||
|
||||
.icon{
|
||||
position:relative;
|
||||
width:@boxWidth/2-10;
|
||||
height:@boxWidth/2-10;
|
||||
.radius(50px);
|
||||
border:4px solid #66cc33;
|
||||
margin:15px auto 5px auto;
|
||||
}
|
||||
|
||||
.icon_box{
|
||||
width:@boxWidth/2-10;
|
||||
height:@boxWidth/2-10;
|
||||
margin:0 auto;
|
||||
text-align:center;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.lose .icon{
|
||||
border-color:#FF9090;
|
||||
}
|
||||
|
||||
.lose .icon_box{
|
||||
.animation(lose_Animation,0.5s,ease,0s,1);
|
||||
}
|
||||
|
||||
.dec_txt{
|
||||
font-size:16px;
|
||||
text-align:center;
|
||||
color:#666;
|
||||
line-height:26px;
|
||||
height:26px;
|
||||
padding:5px 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tip .icon{
|
||||
width:@boxWidth/2-10;
|
||||
height:@boxWidth/2-10;
|
||||
background-color:#66cc33;
|
||||
.radius(100%);
|
||||
color:#fff;
|
||||
font-size:@boxWidth/2-10;
|
||||
text-align:center;
|
||||
line-height:@boxWidth/2-10;
|
||||
}
|
||||
|
||||
.success{
|
||||
.line_short{
|
||||
width:25px;
|
||||
height:5px;
|
||||
position:absolute;
|
||||
left: 14px;
|
||||
top: 46px;
|
||||
.radius(4px);
|
||||
background-color:#66cc33;
|
||||
.rotate(45deg);
|
||||
.animation(success_short_Animation,0.65s,ease,0s,1);
|
||||
}
|
||||
|
||||
.line_long{
|
||||
width:47px;
|
||||
height:5px;
|
||||
position:absolute;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
.radius(4px);
|
||||
background-color:#66cc33;
|
||||
.rotate(-45deg);
|
||||
.animation(success_long_Animation,0.65s,ease,0s,1);
|
||||
}
|
||||
}
|
||||
.lose{
|
||||
.line_left,
|
||||
.line_right{
|
||||
width:47px;
|
||||
height:5px;
|
||||
position:absolute;
|
||||
left: 17px;
|
||||
top: 37px;
|
||||
.radius(4px);
|
||||
background-color:#FF9090;
|
||||
.rotate(45deg);
|
||||
}
|
||||
.line_right{
|
||||
right: 11px;
|
||||
top: 37px;
|
||||
.rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.animation(@name:none,@duration:0,@timing:ease,@delay:0s,@count:1){
|
||||
-webkit-animation: @name @duration @timing @delay @count;
|
||||
-moz-animation: @name @duration @timing @delay @count;
|
||||
animation: @name @duration @timing @delay @count;
|
||||
}
|
||||
|
||||
/* 总体动画 函数 */
|
||||
.allAnimation(@name,@content){
|
||||
@-webkit-keyframes @name{
|
||||
@content();
|
||||
};
|
||||
@-moz-keyframes @name{
|
||||
@content();
|
||||
}
|
||||
@-webkit-keyframes @name{
|
||||
@content();
|
||||
}
|
||||
}
|
||||
/*all animate*/
|
||||
.allAnimation(alertAnimation,{
|
||||
0% {
|
||||
-webkit-transform: scale(0.5); }
|
||||
45% {
|
||||
-webkit-transform: scale(1.25); }
|
||||
80% {
|
||||
-webkit-transform: scale(0.95); }
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
});
|
||||
/*all animate*/
|
||||
|
||||
/*success short animate*/
|
||||
.allAnimation(success_short_Animation,{
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}70% {
|
||||
width: 50px;
|
||||
left: -4px;
|
||||
top: 37px;
|
||||
}84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
});
|
||||
/*success short animate*/
|
||||
|
||||
/*success long animate*/
|
||||
.allAnimation(success_long_Animation,{
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
});
|
||||
/*success long animate*/
|
||||
|
||||
/*load_Animation*/
|
||||
.allAnimation(load_Animation,{
|
||||
0%{
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.2;
|
||||
}50% {
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.5;
|
||||
}80% {
|
||||
-webkit-transform:scale(1.15);
|
||||
opacity:0.8;
|
||||
}100% {
|
||||
-webkit-transform:scale(1);
|
||||
opacity:1.0;
|
||||
}
|
||||
});
|
||||
|
||||
/*load_Animation*/
|
||||
|
||||
/*lose_Animation*/
|
||||
.allAnimation(lose_Animation,{
|
||||
0%{
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.2;
|
||||
}50% {
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.5;
|
||||
}80% {
|
||||
-webkit-transform:scale(1.15);
|
||||
opacity:0.8;
|
||||
}100% {
|
||||
-webkit-transform:scale(1);
|
||||
opacity:1.0;
|
||||
}
|
||||
});
|
||||
|
||||
/*lose_Animation*/
|
||||
|
||||
.delay(@time){
|
||||
-webkit-animation-delay:@time;
|
||||
-moz-animation-delay:@time;
|
||||
animation-delay:@time;
|
||||
}
|
||||
.load{
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
.radius(50px);
|
||||
border: 4px solid #fff;
|
||||
margin: 15px auto 5px auto;
|
||||
top: 10px;
|
||||
|
||||
.icon_box{
|
||||
margin:10px auto;
|
||||
width:60px;
|
||||
height:60px;
|
||||
}
|
||||
|
||||
.cirBox1,.cirBox2,.cirBox3{
|
||||
width:60px;
|
||||
height:60px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.cirBox1 > div,.cirBox2 > div,.cirBox3 > div{
|
||||
width:10px;
|
||||
height:10px;
|
||||
.radius(100%);
|
||||
background-color:#ccc;
|
||||
position:absolute;
|
||||
}
|
||||
.cirBox1{
|
||||
.rotate(30deg);
|
||||
}
|
||||
.cirBox2{
|
||||
.rotate(60deg);
|
||||
}
|
||||
.cirBox3{
|
||||
.rotate(90deg);
|
||||
}
|
||||
.cir1{
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
.cir2{
|
||||
right:0;
|
||||
top:0;
|
||||
}
|
||||
.cir3{
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
.cir4{
|
||||
left:0;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
.cir1,.cir2,.cir3,.cir4{
|
||||
.animation(cir_Animation,1.2s,ease,0s,infinite);
|
||||
}
|
||||
}
|
||||
|
||||
.cirBox1 .cir2{
|
||||
.delay(-1.1s);
|
||||
}
|
||||
.cirBox1 .cir3{
|
||||
.delay(-0.8s);
|
||||
}
|
||||
.cirBox1 .cir4{
|
||||
.delay(-0.5s);
|
||||
}
|
||||
|
||||
.cirBox2 .cir2{
|
||||
.delay(-1.0s);
|
||||
}
|
||||
.cirBox2 .cir3{
|
||||
.delay(-0.7s);
|
||||
}
|
||||
.cirBox2 .cir4{
|
||||
.delay(-0.4s);
|
||||
}
|
||||
|
||||
.cirBox3 .cir2{
|
||||
.delay(-0.9s);
|
||||
}
|
||||
.cirBox3 .cir3{
|
||||
.delay(-0.6s);
|
||||
}
|
||||
.cirBox3 .cir4{
|
||||
.delay(-0.3s);
|
||||
}
|
||||
|
||||
.allAnimation(cir_Animation,{
|
||||
0%,80%,100%{
|
||||
-webkit-transform:scale(0.4);
|
||||
}
|
||||
40%{
|
||||
-webkit-transform:scale(1.0);
|
||||
}
|
||||
});
|
||||
|
||||
.mask{
|
||||
width:@globalWidth;
|
||||
height:@globalWidth;
|
||||
background-color:#000;
|
||||
opacity:.8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index:1000;
|
||||
}
|
||||
391
cdn/dialog.old.css
Executable file
391
cdn/dialog.old.css
Executable file
@@ -0,0 +1,391 @@
|
||||
body,div,p,span{margin:0;padding:0;}
|
||||
body{
|
||||
font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.btn-container{
|
||||
width:100%;
|
||||
}
|
||||
#animationTipBox *{
|
||||
box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
|
||||
#animationTipBox{
|
||||
width:180px;
|
||||
height:auto;
|
||||
background-color:#fff;
|
||||
border-radius:8px;
|
||||
position:fixed;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-90px;
|
||||
margin-top:-75px;
|
||||
z-index:1001;
|
||||
-webkit-animation:alertAnimation 0.3s ease-in-out 0 1;
|
||||
}
|
||||
#animationTipBox .icon{
|
||||
position:relative;
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50px;
|
||||
border:4px solid #66cc33;
|
||||
margin:15px auto 5px auto;
|
||||
}
|
||||
#animationTipBox .icon_box{
|
||||
width:80px;
|
||||
height:80px;
|
||||
margin:0 auto;
|
||||
text-align:center;
|
||||
position:relative;
|
||||
}
|
||||
.tip .icon{
|
||||
width:80px;
|
||||
height:80px;
|
||||
background-color:#66cc33;
|
||||
border-radius:100%;
|
||||
color:#fff;
|
||||
font-size:80px;
|
||||
text-align:center;
|
||||
line-height:80px;
|
||||
}
|
||||
#animationTipBox .lose .icon{
|
||||
border-color:#FF9090;
|
||||
}
|
||||
#animationTipBox .lose .icon_box{
|
||||
-webkit-animation:lose_Animation 0.5s;
|
||||
}
|
||||
#animationTipBox .dec_txt{
|
||||
font-size:16px;
|
||||
text-align:center;
|
||||
color:#666;
|
||||
line-height:26px;
|
||||
height:26px;
|
||||
padding:5px 0 10px 0;
|
||||
}
|
||||
.success .line_short{
|
||||
width:25px;
|
||||
height:5px;
|
||||
position:absolute;
|
||||
left: 14px;
|
||||
top: 46px;
|
||||
border-radius:4px;
|
||||
background-color:#66cc33;
|
||||
-webkit-transform:rotate(45deg);
|
||||
transform:rotate(45deg);
|
||||
-webkit-animation:success_short_Animation 0.65s;
|
||||
}
|
||||
.success .line_long{
|
||||
width:47px;
|
||||
height:5px;
|
||||
position:absolute;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
border-radius:4px;
|
||||
background-color:#66cc33;
|
||||
-webkit-transform:rotate(-45deg);
|
||||
-webkit-animation:success_long_Animation 0.65s;
|
||||
}
|
||||
|
||||
.lose .line_left,.lose .line_right{
|
||||
width:47px;
|
||||
height:5px;
|
||||
position:absolute;
|
||||
left: 17px;
|
||||
top: 37px;
|
||||
border-radius:4px;
|
||||
background-color:#FF9090;
|
||||
-webkit-transform:rotate(45deg);
|
||||
transform:rotate(45deg);
|
||||
}
|
||||
.lose .line_right{
|
||||
right: 11px;
|
||||
top: 37px;
|
||||
-webkit-transform:rotate(-45deg);
|
||||
transform:rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* tipBoxKeyFrames */
|
||||
@keyframes alertAnimation{
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
45% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes alertAnimation{
|
||||
0% {
|
||||
-webkit-transform: scale(0.5); }
|
||||
45% {
|
||||
-webkit-transform: scale(1.25); }
|
||||
80% {
|
||||
-webkit-transform: scale(0.95); }
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* tipBoxKeyFrames */
|
||||
|
||||
|
||||
/*success_Animation*/
|
||||
@-webkit-keyframes success_short_Animation{
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -4px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
@keyframes success_short_Animation{
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px;
|
||||
}
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -4px;
|
||||
top: 37px;
|
||||
}
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px;
|
||||
}
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes success_long_Animation{
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
@keyframes success_long_Animation{
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px;
|
||||
}
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
/*success_Animation*/
|
||||
|
||||
/* ---------------------------------------------------------------------------------------------------------------------------- */
|
||||
|
||||
/*lose_Animation*/
|
||||
@-webkit-keyframes lose_Animation{
|
||||
0%{
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform:scale(1.15);
|
||||
opacity:0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform:scale(1);
|
||||
opacity:1.0;
|
||||
}
|
||||
}
|
||||
/*lose_Animation*/
|
||||
|
||||
|
||||
/*load_Animation*/
|
||||
@-webkit-keyframes load_Animation{
|
||||
0%{
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.2;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform:scale(0.6);
|
||||
opacity:0.5;
|
||||
}
|
||||
80% {
|
||||
-webkit-transform:scale(1.15);
|
||||
opacity:0.8;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform:scale(1);
|
||||
opacity:1.0;
|
||||
}
|
||||
}
|
||||
/*load_Animation*/
|
||||
.load{
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
border-radius: 50px;
|
||||
border: 4px solid #fff;
|
||||
margin: 15px auto 5px auto;
|
||||
top: 10px;
|
||||
}
|
||||
.load .icon_box{
|
||||
margin:10px auto;
|
||||
width:60px;
|
||||
height:60px;
|
||||
}
|
||||
.load .cirBox1,.load .cirBox2,.load .cirBox3{
|
||||
width:60px;
|
||||
height:60px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
.load .cirBox1 > div,.load .cirBox2 > div,.load .cirBox3 > div{
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-radius:100%;
|
||||
background-color:#ccc;
|
||||
position:absolute;
|
||||
}
|
||||
.load .cirBox1{
|
||||
-webkit-transform:rotate(30deg);
|
||||
}
|
||||
.load .cirBox2{
|
||||
-webkit-transform:rotate(60deg);
|
||||
}
|
||||
.load .cirBox3{
|
||||
-webkit-transform:rotate(90deg);
|
||||
}
|
||||
.load .cir1{
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
.load .cir2{
|
||||
right:0;
|
||||
top:0;
|
||||
}
|
||||
.load .cir3{
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
.load .cir4{
|
||||
left:0;
|
||||
bottom:0;
|
||||
}
|
||||
.load .cir1,.load .cir2,.load .cir3,.load .cir4{
|
||||
-webkit-animation:cir_Animation 1.2s ease 0 infinite;
|
||||
}
|
||||
.cirBox1 .cir2{
|
||||
-webkit-animation-delay:-1.1s;
|
||||
}
|
||||
.cirBox1 .cir3{
|
||||
-webkit-animation-delay:-0.8s;
|
||||
}
|
||||
.cirBox1 .cir4{
|
||||
-webkit-animation-delay:-0.5s;
|
||||
}
|
||||
|
||||
.cirBox2 .cir2{
|
||||
-webkit-animation-delay:-1.0s;
|
||||
}
|
||||
.cirBox2 .cir3{
|
||||
-webkit-animation-delay:-0.7s;
|
||||
}
|
||||
.cirBox2 .cir4{
|
||||
-webkit-animation-delay:-0.4s;
|
||||
}
|
||||
|
||||
.cirBox3 .cir2{
|
||||
-webkit-animation-delay:-0.9s;
|
||||
}
|
||||
.cirBox3 .cir3{
|
||||
-webkit-animation-delay:-0.6s;
|
||||
}
|
||||
.cirBox3 .cir4{
|
||||
-webkit-animation-delay:-0.3s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes cir_Animation{
|
||||
0%,80%,100%{
|
||||
-webkit-transform:scale(0.4);
|
||||
}
|
||||
40%{
|
||||
-webkit-transform:scale(1.0);
|
||||
}
|
||||
}
|
||||
.mask{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:#000;
|
||||
opacity:.8;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index:1000;
|
||||
}
|
||||
4
cdn/zepto.min.js
vendored
Executable file
4
cdn/zepto.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user