这个一个简单的自定义弹出提示框,是期初开发时弄的一个简单的通用的对话提示框,默认情况下,是一个确定按钮,可以自定义按钮代码。
具体代码如下:
/* * 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标签时,宽度自动各占一半)。