jQuery实现的各种不同样式弹出框
本来做项目时，需要用到弹框提示用户出错，老师说，普通的alert样式不好看，提示框中会有网站地址，因此通过查找网络找到了这几个样式，均来自网络，调试可用，（加载中需要图片）
可以在http://www.xwcms.net/下载更多模板
js代码
/*! zdialog | (c) 2016 | by zcy */
/**
* FunL: 表示左侧按钮的触发事件
* 默认事件 关闭弹出层
* **/
;(function($,window,document,undefined){
//默认参数
var PARAMS;
var DEFAULTPARAMS = { Title: "标题", Content: "",BtnL:"确定",BtnR:"取消" , FunL: new Object, FunR: new Object };
$.DialogByZ = {
//弹出提示框
Alert: function (params) {
Show(params,"Alert");
},
//弹出确认框
Confirm: function (params) { Show(params,"Confirm"); },
//自动显示弹框
Autofade: function (params) { Show(params,"Autofade") },
//关闭弹出框
Close: function () {
$(".zbox-popup,.zbox-popup-backdrop").remove();
},
//加载图形
Loading:function(Url){
loadBox(Url)
}
};
//初始化参数
function Init(params) {
if (params != undefined && params != null) {
PARAMS = $.extend({},DEFAULTPARAMS, params);
}
};
function loadBox(Url){
var url=Url;
var dislogContainer=$('
');
var blackFilter=$('');
setTimeout(function(){
$(".zbox-popup").addClass('zbox-popup-in');
$(".zbox-popup-backdrop").addClass('zbox-active');
},30)
//$("body").append(blackFilter);
$("body").append(dislogContainer);
}
function Show(params, caller){
Init(params);
var dislogContainer;
var dialogInner;
var dialogBtn;
var blackFilter=$('');
if(caller=='Autofade'){
dislogContainer=$('');
$("body").append(dislogContainer);
setTimeout(function(){
$(".zbox-toast-container").addClass('zbox-active');
},30)
setTimeout(function(){
$(".zbox-toast-container").remove();
},3000)
}else{
dislogContainer=$('');
dialogInner=$(''+PARAMS.Title+''+PARAMS.Content+'');
dialogBtn=$('');
if(caller=='Confirm'){
dialogBtn.append($(''));
}
dislogContainer.append(dialogInner);
dislogContainer.append(dialogBtn);
setTimeout(function(){
$(".zbox-popup").addClass('zbox-popup-in');
$(".zbox-popup-backdrop").addClass('zbox-active');
},10)
$("body").append(blackFilter);
$("body").append(dislogContainer);
$(".zbox-popup-button").click(function(){
var indexs=$(this).attr('index');
if(indexs==0){
//左侧按钮
if($.isFunction(PARAMS.FunL)){
PARAMS.FunL();
}else{
$.DialogByZ.Close();
}
}else{
//右侧按钮
if($.isFunction(PARAMS.FunR)){
PARAMS.FunR();
}else{
$.DialogByZ.Close();
}
}
return false;
})
}
//
}
})(jQuery,window,document);css代码
@charset "utf-8";
/* CSS Document */
body{ -webkit-font-smoothing: antialiased; }
.zbox-popup {
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
display: none;
overflow: hidden;
width: 270px;
-webkit-transition-property: -webkit-transform,opacity;
transition-property: transform,opacity;
-webkit-transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1.2) ;
transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1.2);
text-align: center;
opacity: 0;
color: #000;
border-radius: 3px;
z-index: 10000;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
}
.zbox-popup.zbox-popup-in {
display: block;
transition-property: all;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1) ;
transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1);
opacity: 1;
}
.zbox-popup-inner {
position: relative;
padding: 15px;
border-radius: 3px 3px 0 0;
background: rgba(255,255,255,.95);
}
.zbox-popup-inner:after {
position: absolute;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
background-color: rgba(0,0,0,.2);
}
.zbox-popup-title {
font-size:16px;
font-weight: 500;
text-align: center;
color: #4a4a4a;
}
.zbox-popup-title+.zbox-popup-text {
font-family: inherit;
font-size: 16px;
margin: 5px 0 0;
color: #4a4a4a;
line-height: 1.75;
}
.zbox-popup-buttons {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: 44px;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.zbox-popup-button {
font-size: 14px;
line-height: 44px;
position: relative;
display: block;
overflow: hidden;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 0 5px;
cursor: pointer;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
color:#fd9e09;
background: rgba(255,255,255,.95);
-webkit-box-flex: 1;
}
.zbox-popup-button:first-child:last-child {
border-radius: 0 0 3px 3px;
}
.zbox-popup-button.zbox-popup-button-bold {
font-weight: 600;
}
.zbox-popup-button:after {
position: absolute;
z-index: 15;
top: 0;
right: 0;
bottom: auto;
left: auto;
display: block;
width: 1px;
height: 100%;
content: '';
-webkit-transform: scaleX(.5);
transform: scaleX(.5);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
background-color: rgba(0,0,0,.2);
}
.zbox-popup-backdrop.zbox-active {
opacity: 1;
}
.zbox-popup-backdrop {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
opacity: 0;
background: rgba(0,0,0,.4);
}
.zbox-toast-container{
position:fixed;
z-index:9999;
bottom:60px;
width:100%;
-webkit-transition:opacity .8s;
transition:opacity .8s;
opacity:0;
left: 0;
}
.zbox-toast-container.zbox-active{opacity:1}
.zbox-toast-message{
font-size:14px;
width:270px;
margin:5px auto;
padding:5px;
text-align:center;
color:#000;
border-radius:5px;
background-color:#d8d8d8;
}
.zbox-btn-outlined.zbox-btn-blue, .zbox-btn-outlined.zbox-btn-primary {
color: #007aff;
}
.zbox-btn-outlined {
background-color: transparent;
}
.zbox-btn-blue, .zbox-btn-primary, input[type=submit] {
color: #fff;
border: 1px solid #007aff;
background-color: #007aff;
}
.zbox-btn, button, input[type=button], input[type=reset], input[type=submit] {
font-size: 14px;
font-weight: 400;
line-height: 1.42;
position: relative;
display: inline-block;
margin-bottom: 0;
padding: 6px 12px;
cursor: pointer;
-webkit-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
transition-duration: .2s;
text-align: center;
vertical-align: top;
white-space: nowrap;
color: #333;
border: 1px solid #ccc;
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #fff;
background-clip: padding-box;
}
.zbox-btn {
display: block;
width: 120px;
margin: 10px auto;
}
#zchange{ width:44px; height: 44px; display:block;margin: 0 auto;
animation:circle1 1.2s infinite linear; -webkit-animation:circle1 1.2s infinite linear; transition: all linear;}
@-webkit-keyframes circle1
{
0% { -webkit-transform: rotate(0deg) }
100% { -webkit-transform: rotate(360deg) ;}
}
@keyframes circle1
{
0% { transform: rotate(0deg) ;}
100% { transform: rotate(360deg) ;}
}