十四、制作优美的div弹框

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

功能描述：确认【调整按钮】弹出精美div弹框

1、jsp页面：perfectAlertDiv.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>确认调整按钮弹出精美弹框</title>
<script type="text/javascript" src="../../js/common/jquery.min.js"></script>
<script type="text/javascript" src="../../js/common/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/common/jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/perfectAlertDiv.css">
<script type="text/javascript" src="../../js/divFunction/perfectAlertDiv.js"></script>
</head>
<body>

<div class="mainDiv">
<div class="div-inline">
<select class="selectCategory commonClass">
<option value ="activityMainId">活动1</option>
<option value ="id">活动2</option>
</select>
<input type="text" class="commonClass">
</div>
<div class="div-inline">
<label>  设置活动截止日期：</label>
<input type="text" style="width:152px" id="activityEndTime" class="commonClass" value = ""/>
</div>
<div class="div-inline">
        
<button class="confirmModifyBtn" id="confirmModifyBtn" type="button">确认调整</button>
</div>
</div> 
<div class="layerDiv" id="layerDiv">
<div class="layer-content" id="first-layer">
<div class="content-title" id="first-content-title">
</div>
<div class="content-btn">
<span class="btn-lt confirmLeft cancleLayer">取消</span>
<span class="btn-rt confirmRight closelayer" id="firstConfirmBtn">确定</span>
</div>
</div>
<div class="layer-content" id="second-layer">
<div class="content-title" id="second-layer-title">
活动码无效
</div>
<div class="content-btn" id="comfirmBtn">
确定
</div>
</div>
<div class="layer-content" id="three-layer">
<div class="content-title" id="Three-layer-title">
活动码无效
</div>
<div class="content-btn" id="comfirmThreeBtn">
确定
</div>
</div>
</div>
</body>
</html>

2、perfectAlertDiv.js

//利用正则去掉前后空格
function spaceTrim(val){
return val.replace(/(^\s*)|(\s*$)/g, "");
} $(function(){
//确认调整触发的事件
$('#confirmModifyBtn').click(function () {
var date = new Date();
/*
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
*/
$("#first-content-title").text("是否确定将"+"活动截止日期调整至："+ date);
//弹出首次提示框：
$("#layerDiv").show();
$("#first-layer").show();
}); $("#firstConfirmBtn").click(function () {
$("#layerDiv").hide();
$("#first-layer").hide();
$("#layerDiv").show();
$("#three-layer").show();
})
//点击首个弹框的取消按钮
$(".cancleLayer").click(function(){
$("#layerDiv").hide();
$("#first-layer").hide();
$("#scond-layer").hide();
}) //点击回显弹框的取消按钮
$("#comfirmThreeBtn").click(function(){
$("#layerDiv").hide();
$("#three-layer").hide();
})
})

3、perfectAlertDiv.css

@charset "UTF-8";
/*1、设置筛选模块样式*/
.mainDiv {
width: 100%;
height: 100%;
background: #E8E8E8;
padding-top: 70px;
padding-left: 70px;
box-sizing: border-box;
} /*实现多个div在同一行*/
.mainDiv .div-inline{
display:inline;
} /*设置选择下拉列表的宽度*/
.mainDiv .selectCategory {
width: 120px;
} /*设置：下拉列表、输入框、确认调整按钮的边线带有弧度*/
.mainDiv .commonClass {
border: 1px;
border-radius: 5px;
height: 28px;
font-size: 16px;
} /*设置确认调整按钮：字体为白色(#fff)、蓝色背景、带有弧度 */
.mainDiv .confirmModifyBtn{
width: 102px;
height: 28px;
line-height: 28px;
background: #169BD5;
border-radius: 5px;
color: #fff;
} /*2、设置弹框模块样式*/
.layerDiv{
width:100%;
height:100%;
background:#000;
position:fixed;
opacity:0.5;
top:0px;
left:0px;
z-index:;
display:none;
} /*设置三层div弹框都是隐藏的*/
#first-layer{
display:none;
} .layerDiv .layer-content{
width:240px;
height:160px;
background:#fff;
position:absolute;
top:;
left:;
bottom:;
right:;
margin:auto;
border-radius:12px;
}
.layerDiv .layer-content .content-title{
width:100%;
height:119px;
padding:20px;
box-sizing:border-box;
font-size:14px;
line-height:1.5;
color:#333;
}
.layerDiv .layer-content #first-content-title{
padding-top:30px;
}
.layerDiv .layer-content .content-btn{
width:100%;
height:40px;
border-top:1px solid #ddd;
}
.layerDiv .layer-content .content-btn span{
text-align:center;
line-height:40px;
color:#40A5FF;
cursor:pointer;
}
.layerDiv .layer-content .content-btn .btn-lt{
display:inline-block;
width:119px;
height:40px;
border-right:1px solid #ddd;
}
.layerDiv .layer-content .content-btn .btn-rt{
display:inline-block;
width:119px;
height:40px;
}
#second-layer{
display:none;
}
#three-layer{
display:none;
}
#second-layer #comfirmBtn #three-layer{
text-align:center;
line-height:40px;
color:#40A5FF;
cursor:pointer; }
#second-layer #second-layer-title #three-layer-title{
padding:0px;
text-align:center;
line-height:119px;
}
#comfirmThreeBtn{
text-align:center;
line-height:40px;
color:#40A5FF;
cursor:pointer;
} .layerDiv #three-layer #Three-layer-title {
width: 100%;
height: 119px;
padding: 20px;
box-sizing: border-box;
font-size: 14px;
line-height: 1.5;
color: #333;
text-align:center;
line-height:90px;
} .confirmRight{
float: right;
} .confirmLeft{
float: left;
}