这个一个简单的自定义弹出提示框,是期初开发时弄的一个简单的通用的对话提示框,默认情况下,是一个确定按钮,可以自定义按钮代码。
具体代码如下:
/*
* author laoyuan
* 调用方法 $.comfirmBox.showbox("show","msg",btnHtml);
* show-方式、msg-提示信息,btnHtml-自定义按钮代码(默认为<span class='true'>确定</span>,class='true'宽度为100%,
* 当自定义2个a或者span标签时,宽度自动各占一半)
*/
(function () {
$.comfirmBox={
showbox:function(fadetype,msg,btnHtml){
addHtml(fadetype, msg,btnHtml) ;
}
}
var addHtml = function (fadetype, msg,btnHtml) {
var boxHTML="<div class='xbox'><div class='bg'></div><div class='info-box'><div class='info'></div><div class='J-btn'><span class='true'>确定</span></div></div></div>";
$("body").append(boxHTML);
$(".xbox").find(".info").html(msg);
if(btnHtml){
$(".xbox").find(".J-btn").html(btnHtml);
}
var $fade=fadetype;
//显示
if($fade=="fadeIn"){
$(".xbox").fadeIn(50);
}else if($fade=="show"){
$(".xbox").show();
}
//关闭弹出层
$(".J-btn,.bg").click(function(){
$(".xbox").hide();
$("body").find(".xbox").remove();
})
}
})()
css样式:
.xbox{display:none;}
.xbox .bg{width:100%; height:100%; position:fixed; left:0; top:0; z-index:50000; background:#333; opacity:0.5;}
.xbox .info-box{ width:80%; height:auto; background:#fff; overflow:hidden; border-radius:10px; position:fixed; left:50%; top:40%; margin:-60px -40%; z-index:100000; border:1px solid #ddd}
.xbox .info-box .title{ font-size: 16px;}
.xbox .info-box .info{ height:auto; overflow:hidden; line-height:30px; text-align:center; padding:15px;}
.xbox .info-box .J-btn{ border-top:1px solid #E6E6E6; height:50px; }
.xbox .info-box .J-btn span,
.xbox .info-box .J-btn a{float:left;width:50%;text-align:center; line-height:50px; box-sizing: border-box;}
.xbox .info-box .J-btn span:nth-child(2),
.xbox .info-box .J-btn a:nth-child(2){border-left:1px solid #E6E6E6; }
.xbox .info-box .J-btn span{ color: #00B22D}
.xbox .info-box .J-btn a{color: #00bbee;}
.xbox .info-box .J-btn .true{ width:100%;}
调用方法 $.comfirmBox.showbox(“show”,”msg”,btnHtml);
1、show-方式、有两种(show、fadeIn)
2、msg-提示信息
3、btnHtml-自定义按钮代码(默认为<span class=’true’>确定</span>,class=’true’时宽度为100%,当自定义2个a或者span标签时,宽度自动各占一半)。
