这个一个简单的自定义弹出提示框,是期初开发时弄的一个简单的通用的对话提示框,默认情况下,是一个确定按钮,可以自定义按钮代码。

具体代码如下:

/*
 *  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标签时,宽度自动各占一半)。

具体demo:请点击此处