以下是 html5手机移动端对话框特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<title>html5手机移动端对话框特效 </title>
<link rel="stylesheet" type="text/css" href="mdialog.css">
<style type="text/css">
input{
width: 70px;
height:20px;
margin:100px auto;
}
</style>
</head>
<body>
<center>
<input type="button" id="success" value="成功" />
<input type="button" id="error" value="错误" />
<input type="button" id="load" value="正在加载" />
<input type="button" id="tip" value="提示" />
</center>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="mdialog.js"></script>
<script type="text/javascript">
//成功
$("#success").click(function(){
new TipBox({type:'success',str:'操作成功',hasBtn:true});
});
//错误
$("#error").click(function(){
new TipBox({type:'error',str:'对不起,出错了!',hasBtn:true});
});
//提示
$("#tip").click(function(){
new TipBox({type:'tip',str:'这是提示信息',clickDomCancel:true,setTime:10000500,hasBtn:true});
});
//加载
$("#load").click(function(){
new TipBox({type:'load',str:"努力加载中..",setTime:1500,callBack:function(){
new TipBox({type:'success',str:'操作成功',hasBtn:true});
}});
});
</script>
</body>
</html>JS代码(mdialog.js):
/* * @弹出提示层 ( 加载动画(load),提示动画(tip),成功(success),错误(error),) * @method tipBox * @description 默认配置参数 * @time 2014-12-19 * @param{
Number}
width -宽度 * @param{
Number}
height -高度 * @param{
String}
str -默认文字 * @param{
Object}
windowDom -载入窗口 默认当前窗口 * @param{
Number}
setTime -定时消失(毫秒) 默认为0 不消失 * @param{
Boolean}
hasMask -是否显示遮罩 * @param{
Boolean}
hasMaskWhite -显示白色遮罩 * @param{
Boolean}
clickDomCancel -点击空白取消 * @param{
Function}
callBack -回调函数 (只在开启定时消失时才生效) * @param{
Function}
hasBtn -显示按钮 * @param{
String}
type -动画类型 (加载,成功,失败,提示) * @example * new TipBox();
* new TipBox({
type:'load',setTime:1000,callBack:function(){
alert(..)}
}
);
*/
function TipBox(cfg){
this.config ={
width:250,height:170,str:'正在处理',windowDom:window,setTime:0,hasMask:true,hasMaskWhite:false,clickDomCancel:false,callBack:null,hasBtn:false,type:'success'}
$.extend(this.config,cfg);
//存在就retrun if(TipBox.prototype.boundingBox) return;
//初始化 this.render(this.config.type);
return this;
}
;
//外层boxTipBox.prototype.boundingBox = null;
//渲染TipBox.prototype.render = function(tipType,container){
this.renderUI(tipType);
//绑定事件 this.bindUI();
//初始化UI this.syncUI();
$(container || this.config.windowDom.document.body).append(TipBox.prototype.boundingBox);
}
;
//渲染UITipBox.prototype.renderUI = function(tipType){
TipBox.prototype.boundingBox = $("<div id='animationTipBox'></div>");
tipType == 'load' && this.loadRenderUI();
tipType == 'success' && this.successRenderUI();
tipType == 'error' && this.errorRenderUI();
tipType == 'tip' && this.tipRenderUI();
TipBox.prototype.boundingBox.appendTo(this.config.windowDom.document.body);
//是否显示遮罩 if(this.config.hasMask){
this.config.hasMaskWhite ? this._mask = $("<div class='mask_white'></div>"):this._mask = $("<div class='mask'></div>");
this._mask.appendTo(this.config.windowDom.document.body);
}
// 是否显示按钮 if(this.config.hasBtn){
this.config.height = 206;
$('#animationTipBox').css("margin-top","103px");
switch(this.config.type){
case 'success':$(".success").after("<button class='okoButton'>ok</button>");
break;
case 'error':$(".lose").after("<button class='okoButton redOkoButton'>ok</button>");
break;
case 'tip':$(".tip").after("<button class='okoButton'>ok</button>");
break;
default:break;
}
$('button.okoButton').on('click',function(){
_this.close();
}
);
}
//定时消失 _this = this;
!this.config.setTime && typeof this.config.callBack === "function" && (this.config.setTime = 1);
this.config.setTime && setTimeout( function(){
_this.close();
}
,_this.config.setTime );
}
;
TipBox.prototype.bindUI = function(){
_this = this;
//点击空白立即取消 this.config.clickDomCancel && this._mask && this._mask.click(function(){
_this.close();
}
);
}
;
TipBox.prototype.syncUI = function(){
TipBox.prototype.boundingBox.css({
width:this.config.width+'px',height:this.config.height+'px',marginLeft:"-"+(this.config.width/2)+'px',marginTop:"-"+(this.config.height/2)+'px'}
);
}
;
//提示效果UITipBox.prototype.tipRenderUI = function(){
var tip = "<div class='tip'>";
tip +=" <div class='icon'>i</div>";
tip +=" <div class='dec_txt'>"+this.config.str+"</div>";
tip += "</div>";
TipBox.prototype.boundingBox.append(tip);
}
;
//成功效果UITipBox.prototype.successRenderUI = 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.str+"</div>";
suc += "</div>";
TipBox.prototype.boundingBox.append(suc);
}
;
//错误效果UITipBox.prototype.errorRenderUI = 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.str+"</div>";
err += "</div>";
TipBox.prototype.boundingBox.append(err);
}
;
//加载动画load UITipBox.prototype.loadRenderUI = 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.str+"</div>";
TipBox.prototype.boundingBox.append(load);
}
;
//关闭TipBox.prototype.close = function(){
TipBox.prototype.destroy();
this.destroy();
this.config.setTime && typeof this.config.callBack === "function" && this.config.callBack();
}
;
//销毁TipBox.prototype.destroy = function(){
this._mask && this._mask.remove();
TipBox.prototype.boundingBox && TipBox.prototype.boundingBox.remove();
TipBox.prototype.boundingBox = null;
}
;
分享到QQ
分享到微博
微信扫一扫
