在实际开发或自己做点小东西的时候，用浏览器自带的弹窗感觉不怎么美观，就想自己定义一些弹窗的一些组件供整个项目使用，这里我实现了提示框，确认框和加载框。如下：
这个效果的CSS代码:
/*加载动画*/
@keyframes loading{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-keyframes loading{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes loading{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
*{margin:0;padding:0;}
#shade{
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background:rgba(0,0,0,0.1);
font:normal 13px '微软雅黑';
}
#shade .box{
min-width:200px;
max-width:350px;
background:white;
border:3px solid #3399FF;
position:absolute;
word-wrap: break-word;
}
#shade .box .box_close{
height:20px;
width:20px;
background:blue;
position:absolute;
right:-8px;
top:-8px;
border-radius:10px;
background:#3399FF url("images/cancel.png") no-repeat center center;
cursor:pointer;
transition:1s;
-moz-transform:1s;
-webkit-transition:1s;
}
#shade .box .box_close:hover{
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
#shade .box .title{
background:#3399FF;
height:30px;
width:100%;
padding-left:10px;
box-sizing:border-box;
color:white;
line-height:30px;
font-weight:bold;
cursor:move;
}
#shade .box_container .box_icon{
width:60px;
min-height:50px;
float:left;
}
#shade .box_container .box_content{
padding:10px 10px 10px 10px;
max-width:290px;
min-height:50px;
box-sizing:border-box;
line-height:25px;
float:left;
}
#shade .box .box_button{
clear:both;
height:30px;
width:100%;
text-align:center;
padding-bottom:10px;
}
#shade .box_button input[type='button']{
background:#3399FF;
border:0px;
height:25px;
width:60px;
color:white;
cursor:pointer;
}
#shade .box .box_loading{
display:inline-block;
position:relative;
top:-3px;
margin-left:10px;
}
#shade .box .loading_icon{
height:16px;
width:16px;
display:inline-block;
background:url('images/loading.png');
animation:loading 1s infinite linear;
-moz-animation:loading 1s infinite linear;
-webkit-animation:loading 1s infinite linear;
margin-left:10px;
margin-top:3px;
}var MessageBox=(function($){
var _MessageBox={
init:function(){
//获取窗体宽高
var winH=$(window).height();
var winW=$(window).width();
//获取box对象
var box=$("#shade>.box");
//获取宽高
var boxH=box.height();
var boxW=box.width();
//设置box位置
box.css({left:(winW-boxW)/2,top:(winH-boxH)/2});
/*拖拽*/
var _x,_y;//鼠标离控件左上脚的距离
var _move;//移动表示
var _box=$(".box");
//鼠标按下
$(".title").mousedown(function(event){
_move=true;//按下时可以移动
_x=event.pageX-_box.offset().left;
_y=event.pageY-_box.offset().top;
_box.fadeTo(20,0.5);//鼠标按下时设置透明
}).mousemove(function(event){
if(_move){
_box.css({left:event.pageX-_x,top:event.pageY-_y});//设置控件的位置
}
}).mouseup(function(event){
_move=false;//设置为不能移动
_box.fadeTo("fast",1);//抬起鼠标后设为不透明
});
},
common:function(option){
//调用初始化
this.init();
//获取shade对象
var _shade=$("#shade");
//判断是否显示遮罩
if(option.shade==false){
_shade.css("background","rgba(0,0,0,0)");
}else{
_shade.css("background","rgba(0,0,0,0.1)");
};
//调用关闭按钮
this.close($(".box_close"));
},
//提示框
alert:function(option){
option=$.extend({title:"提示框",type:"info",shade:true},option);
var alertHtml='<div id="shade"><div class="box"><label class="box_close"></label>'+
'<div class="title">'+option.title+'</div>'+
'<div class="box_container">'+
'<p class="box_icon"></p><div class="box_content">'+option.message+'</div></div>'+
'<div class="box_button"><input type="button" value="确定" class="confirm"/></div></div></div>';
$("body").append(alertHtml);
//调用共用方法
this.common(option);
//根据类型显示不同图标
var _box_icon=$(".box_icon");
if("info"==option.type){
_box_icon.css("background","url('images/info.png') no-repeat 20px 10px");
}else if("error"==option.type){
_box_icon.css("background","url('images/error.png') no-repeat 20px 10px");
}else if("warn"==option.type){
_box_icon.css("background","url('images/warn.png') no-repeat 20px 10px");
}
//确定按钮
this.close($(".confirm"));
},
//确认框
comfirm:function(option,_comfirm){
option=$.extend({title:"确认框",shade:true},option);
var comfirmHtml='<div id="shade"><div class="box"><label class="box_close"></label>'+
'<div class="title">'+option.title+'</div>'+
'<div class="box_container">'+
'<p class="box_icon"></p><div class="box_content">'+option.message+'</div></div>'+
'<div class="box_button"><input type="button" value="确定" class="confirm"/><input type="button" value="取消" class="cancel" style="margin-left:20px"/></div></div></div>';
$("body").append(comfirmHtml);
//调用共用方法
this.common(option);
//设置图标
$(".box_icon").css("background","url('images/comfirm.png') no-repeat 20px 10px");
//取消按钮
this.close($(".cancel"));
//确定按钮
$(".confirm").click(function(){
//回调函数
_comfirm();
//关闭遮罩
$("#shade").remove();
});
},
//加载框
load:function(option){
option=$.extend({shade:true},option);
var loadHtml='<div id="shade"> <div class="box"> <label class="box_close"></label> <label class="loading_icon"></label>'+
'<p class="box_loading">正在加载，请稍后......</p> </div></div>';
$("body").append(loadHtml);
//调用共用方法
this.common(option);
},
//关闭加载框
closeLoad:function(){
$("#shade").remove();
},
//关闭窗口
close:function(obj){
obj.click(function(){
$("#shade").remove();
});
}
};
return _MessageBox;
})(jQuery);$(document).ready(function(){
$(".a").click(function(){
MessageBox.alert({message:"就是这样咯....."});
});
$(".b").click(function(){
MessageBox.comfirm({message:"你确定要一起打他么？"},function(){
MessageBox.alert({message:"确定确定....."});
});
});
$(".c").click(function(){
MessageBox.load();
setTimeout(function(){
MessageBox.closeLoad();
},1000);
});
});测试HTML按钮：
<input type="button" value="提示框" class="a"/>
<input type="button" value="确认框" class="b" />
<input type="button" value="加载框" class="c"/>实现效果：
提示框：
确认框：
加载框：
1039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
