JQ弹窗

 

//css

.dialog-layer{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
filter:alpha(opacity=50);
background-color: #000;
}

.alert-warp{
display: none;
z-index: 999999;
position: fixed;
width: 300px;
height: auto;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #e93c3e;
}

.alert-warp .title{
position: relative;
width: 280px;
height: 27px;
line-height: 27px;
color: #fff;
padding: 0 10px;
background-color: #e93c3e;
}

.alert-warp .close{
position: absolute;
top: 5px;
right: 6px;
width: 16px;
height: 16px;
cursor: pointer;
background: url("css/close.png") no-repeat;
}

.alert-warp .text{
padding: 22px 10px;
text-align: center;
color: #666;
font-size: 14px;
}

.alert-warp .alert-btn{
width: 120px;
height: 36px;
margin: 0 auto;
text-align: center;
line-height: 35px;
font-size: 16px;
color: #fff;
cursor: pointer;
background-color: #e93c3e;
border: 1px solid #e1e1e1;
border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
}

.choose-warp{
display: none;
z-index: 999999;
position: fixed;
width: 300px;
height: auto;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #e93c3e;
}

.choose-warp .title{
position: relative;
width: 280px;
height: 27px;
line-height: 27px;
color: #fff;
padding: 0 10px;
background-color: #e93c3e;
}

.choose-warp .close{
position: absolute;
top: 5px;
right: 6px;
width: 16px;
height: 16px;
cursor: pointer;
background: url("css/close.png") no-repeat;
}

.choose-warp .text{
padding: 22px 10px;
text-align: center;
color: #666;
font-size: 14px;
}

.choose-warp .btn{
width: 100%;
height: 36px;
text-align: center;
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
font-size: 0;
}

.choose-warp .btn span{
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
*display: inline;
zoom:1;
width: 120px;
height: 36px;
margin: 0 5px;
text-align: center;
line-height: 35px;
font-size: 16px;
cursor: pointer;
border: 1px solid #e1e1e1;
border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
}

.choose-warp .choose-confirm{
color: #fff;
background-color: #e93c3e;
}

.choose-warp .console-cancel{
color: #999;
background-color: #fff;
}

 

 

 

//js

var dialog = {
//方块居中
boxCenter: function (element){
var left, top, newLeft, newTop;
left = parseInt($(window).width() / 2);
top = parseInt($(window).height() / 2);
newLeft = left - parseInt($(element).innerWidth() / 2);
newTop = top - parseInt($(element).innerHeight() / 2);
$(element).css("left", newLeft);
$(element).css("top", newTop);
},
//alert弹框
Alert:function(text,confirm){
var textobj = text || "",layer=$(".dialog-layer"),box=$(".alert-warp");
if(layer.length <= 0){
$('<div class="dialog-layer"></div>').appendTo("body");
}
if(box.length <= 0){
$('<div class="alert-warp"><div class="title">提示 <span class="close"></span></div> <p class="text">'+textobj+'</p><div class="alert-btn">确定</div></div>').appendTo("body");
}else{
$(".alert-warp .text").html(textobj);
}
$(".dialog-layer").show();
$(".alert-warp").show();
dialog.boxCenter(".alert-warp");
$(".alert-btn").unbind('click').click(function(){
$(".dialog-layer").hide();
$(".alert-warp").hide();
confirm();
});
$(".alert-warp .close").unbind('click').click(function(){
$(".dialog-layer").hide();
$(".alert-warp").hide();
})
},
//选择框
prompt:function(text,confirm){
var textobj = text || "",layer=$(".dialog-layer"),box=$(".choose-warp");
if(layer.length <= 0){
$('<div class="dialog-layer"></div>').appendTo("body");
}
if(box.length <= 0){
$('<div class="choose-warp"><div class="title">温馨提示 <span class="close"></span></div><p class="text">'+textobj+'</p><div class="btn"><span class="choose-confirm">确定</span> <span class="choose-cancel">取消</span></div></div>').appendTo("body");
}else{
$(".choose-warp .text").html(textobj);
}
$(".dialog-layer").show();
$(".choose-warp").show();
dialog.boxCenter(".choose-warp");
$(".choose-warp .choose-cancel").unbind('click').click(function(){
$(".dialog-layer").hide();
$(".choose-warp").hide();
});
$(".choose-warp .close").unbind('click').click(function(){
$(".dialog-layer").hide();
$(".choose-warp").hide();
});
$(".choose-warp .choose-confirm").unbind('click').click(function(){
$(".dialog-layer").hide();
$(".choose-warp").hide();
confirm();
});
}
};

 

 

//调用方式

function shanchu(){
dialog.prompt("是否删除此选项？",function(){
alert("删除啦");
});
}

function wodealert(){
dialog.Alert("4545456456456");
}

function shanchu2(){
dialog.prompt("是否删除此选项2？",function(){
alert("删除啦2");
});
}