js:
//弹窗确定按钮事件
$("#confirm").click(function(){
show_or_hide_pop_div('','hide');
});
css:(不一定全部都有用,先存着)
图片:
function letDivCenter(divName)
{
var top = $(divName).height();
var left = ($(window).width() - $(divName).width()) * 482 / 1000;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$(divName).css({
position: 'absolute',
top: top+scrollTop,
left: left+scrollLeft
}).show(700);
}
function show_or_hide_pop_div(msg,type){
var _pop=$("#pop_div");
var _msg=$("#err_msg_span");
if(type=="show"){
letDivCenter(_pop);
if(_pop.hasClass("dis-n")){
_pop.removeClass("dis-n");
_msg.html(msg);
}
}
else{
if(!_pop.hasClass("dis-n")){
_pop.removeAttr("style");
_pop.addClass("dis-n");
}
}
}
div:
<div id="pop_div" class="pop-pos-pay h-180 dis-n">
<div class="pop-con-pay-fff h-160">
<a href=""><i class="pop-close"></i></a>
<!--第一行15字最多--><p class="f-16"><i class="b-tan-icon"></i><span id="err_msg_span">是否确定?</span></p>
<p class="mar-l-90 f-16"> </p>
<p class=" text-c mar-t-10"> <input type="button" id="confirm" value="确定" class=" pop-pos-pay-btn" /><input type="button" value="取消" id="cancel" class="pop-pos-pay-btn mar-l-30" οnclick="show_or_hide_pop_div('','hide')" /></p>
</div>
</div>
引用;
显示: show_or_hide_pop_div("确定!","show");
隐藏: show_or_hide_pop_div("","hide");
//弹窗确定按钮事件
$("#confirm").click(function(){
show_or_hide_pop_div('','hide');
});
可结合使用:
$.post('',{},function(data){
if(true){
show_or_hide_pop_div("确定!","show");
$("#confirm").click(function(){
show_or_hide_pop_div('','hide');
});
}
})
css:(不一定全部都有用,先存着)
.pop-pos{ width:386px; height:163px; border-radius:8px; background:rgba(0,0,0,0.5); -ms-background-color:rgb(0,0,0); -ms-filter:alpha(opacity=50);margin:200px auto;}
.pop-con{ width:366px; height:143px; background:#f4f4f4; margin:10px 0 0 10px; position:absolute;}
.h-105{ height:105px;}
.bor-bottom-1{ border-bottom:1px #d0cfcf solid; background:#fff;}
.pop-clo{ font-size:14px; color:#999; padding-left:10px; line-height:36px;}
.pop-title{ color:#116397; font-weight:600; font-size:16px;}
.pop-icon,.pop-icon-2,.pop-icon-collection1,.pop-icon-collection2{ width:44px; height:44px; display:block; margin-left:35px; float:left; }
.pop-icon{ background:url(images/icon.png) no-repeat -58px -99px;}
.pop-icon-collection1{ background:url(images/icon.png) no-repeat -280px -99px; margin-left:58px;}
.pop-icon-collection2{ background:url(images/icon.png) no-repeat -326px -99px; margin-left:58px;}
.l-22{ line-height:22px;}
.l-40{ line-height:40px;}
.padding-10{ padding:10px 10px 10px 14px;}
.pop-text{ width:260px; display:block; margin-left:90px; font-size:16px;}
.pop-pos-pay{ width:386px; height:222px;border-radius:8px; background:rgba(0,0,0,0.5); -ms-background-color:rgb(0,0,0); -ms-filter:alpha(opacity=50);margin:200px auto; z-index:1002;
overflow: auto;}
.pop-con-pay{ width:366px; height:202px; background:#f4f4f4; margin:10px 0 0 10px; position:absolute;}
.pop-con-pay-fff{ width:366px; height:202px; background:#fff; margin:10px 0 0 10px; position:absolute;}
.b-tan-icon{ width:44px; height:44px; display:inline-block; background:url(images/icon.png) no-repeat -106px -99px; margin-bottom:-16px; margin-left:36px; margin-top:35px; margin-right:10px; }
.pop-pos-pay-btn{ padding:5px 20px; background:#bd1f2e; color:#fff; border:medium none; border-radius:6px; cursor:pointer;}
.pop-close{ float: right;width: 20px;height: 20px;display: block;background: url(images/icon.png) no-repeat -157px -64px; margin: 5px;}
.pop-position{ position:relative;}
.send-pop-1{ width:400px; height:300px; border:1px #aaa solid; margin:150px auto ; padding:25px;}
.send-pop-2{ width:550px; border:1px #aaa solid; margin:150px auto ; padding:25px;}
.padding-1-5{ padding:1px 5px;}
.w-350{ width:350px;}
.send-pop-text{ margin-top:10px; border:1px #aaa solid; margin-right:10px;}
.send-pop-btn{ color:#fff; background:#bd1f2e; padding:3px 35px; cursor:pointer; border:medium none; border-radius:5px;}
.w-80{ width:80px;}
.pop-clo-icon{ width:26px; height:26px; display:inline-block; background:url(icon.png) no-repeat -212px -65px; margin-bottom:-7px;margin-left:8px;}
.mar--20{margin:-20px;}
.w-100{ width:100px;}
.w-315{ width:315px;}
.l-icon{ border-left:1px #aaa solid; margin-top:11px; padding-bottom:14px;}
.d-weizhi{ float:left; margin-top:-20px; display:inline-block;}
.mar-l--5{ margin-left:-5px;}
.mar-l-1{ margin-left:1px;}
.send-pop-area{ width:520px; height:160px; margin:20px auto;}
.send-pop-area-btn{color:#fff; background:#bd1f2e; padding:3px 19px; cursor:pointer; border:medium none; border-radius:4px; font-size:16px;}
.send-pop-image{width:900px; border:1px #aaa solid; margin:50px auto ; height:800px; padding:8px 0;}
.pad-td-10{ padding:10px 0;}
.h-180{ height:180px;}
.h-160{ height:160px;}
.mar-l-90{ margin-left:90px;}
图片:
引用;
显示: show_or_hide_pop_div("确定!","show");
隐藏: show_or_hide_pop_div("","hide");