参数封装(传参即可),代码极简,需要的即可带走,代码还可以优化,望大家多多建议。
pc/移动端都适配,话不多说上图上代码。
html(部分)
JQ模态窗口
css(部分)
.pop-box {
z-index: 9999999;
margin-bottom: 3px;
display: none;
position: absolute;
background: #ffbc53;
border: 1px solid #ffbc53;
border-radius: 1rem;
box-sizing: border-box;
padding:0.134rem;
}
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1001;
background-color:#322e28;
-moz-opacity: 0.5;
opacity: .50;
filter: alpha(opacity = 50);
}
.contentText{
width: 100%;
overflow: hidden;
padding:20% 0px;
text-align: center;
font-size: 16px;
color:#ad0814;
}
#buttonPanel{
padding-bottom:20px;
}
#cancel{
width: 30%;
padding: 2%;
font-size: 16px;
margin-right: 30px;
background: #fe5315;
color: #fff;
border: none;
border-radius: 5px;
outline: none;
}
#confirm{
width: 30%;
padding: 2%;
font-size: 16px;
background: #fe5315;
color: #fff;
border: none;
border-radius: 5px;
outline: none;
}
js(部分)
function popupDiv(botn,contentText,cancel,confirm) {
//模态窗口的点击
$("body").on("click",botn,function(){
//模态窗口的内容
var appends = ''+
''+
''+contentText+'
'+
''+
' '+
'';
$("body").append(appends);
// 获取传入的DIV
var $div_obj = $("#pop-div");
// 计算机屏幕高度
var windowWidth = $(window).width();
// 计算机屏幕长度
var windowHeight = $(window).height();
// // 添加并显示遮罩层
$("").width(windowWidth * 0.99)
.height(windowHeight * 0.99).click(function() {
//hideDiv(div_id);
}).appendTo("body");
// 显示弹出的DIV
$div_obj.css({
"position" : "absloute" ,
"display" : "block",
"left":"0",
"right":"0",
"margin":"auto"
});
//取消
$(".pop-box").on("click","#cancel",function(){
hideDiv("pop-div");
});
//确认
$(".pop-box").on("click","#confirm",function(){
alert("可做跳转");
});
// 取得传入DIV的高度
var popupHeight = $div_obj.height();
// 取得传入DIV的长度
var popupWidth = $div_obj.width();
//盒子居中显示
$(".pop-box").css({
"width":windowWidth-windowWidth*0.2+"px",
"top":windowHeight/2-popupHeight/2
})
//bottom部分排版判断
if(cancel==""&&confirm==""){
$("#buttonPanel").hide();
}
else if(cancel==""){
$("#cancel").hide();
$("#confirm").css({
"width":"60%",
"text-align":"center"
});
}
else if(confirm==""){
$("#confirm").hide();
$("#cancel").css({
"width":"60%",
"text-align":"center",
"margin-right":"0px"
});
}
});
}
/*隐藏弹出DIV*/
function hideDiv(div_id) {
$("#bg").remove();
$("#" + div_id).remove()
}