十四、制作优美的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>
<!--模块1 -->
<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 -->
<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;
}
效果展示：
十四、制作优美的div弹框的更多相关文章
- selenium中遇到div弹框，一起引申到其他弹框
1.div弹框和DOM普通元素一样处理 2.出现一下就自动消失的弹框,也是在DOM中有描述的,可以使用xpath,用其内容定位 3.(转,其他弹框处理,包括alert和不同windows) https ...
- 简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)
弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...
- jquery-ui弹框登录前端写法
新建一个div: <div class="container" id="loginForm" hidden> <h4 class=" ...
- 弹框插件self(动效兼容到IE9，功能兼容IE6)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js创建弹框（提示框，待确认框）
;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...
- 章节十四、8-javaScript弹框处理
一.javaScript弹框没有id.也没有xpath,在F12开发者选项中无法直接通过鼠标去选择弹窗来确定元素在代码中的位置. 弹窗有两种,一种实只有"确定"按钮的alert类型 ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框
.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...
- selenium处理div生成弹框
目前遇到的弹框有两种,一种是alert,一种是div,如果遇到div模拟的弹框,在用alert就不行了. 1. public static Alert getAlert(WebDriver dr) { ...
随机推荐
- python-第三方库的理解及某个函数的源代码
第三方库,是一个总称,里面有各个模块,而具体使用的函数是模块里的. 库包含多个模块, 每个模块里包含多个函数. import AAAA 就是引用AAAA这个库,这个库里的模块函数都可以用,只是 ...
- mutiprocessing 同步类型，如锁，条件和队列官方案例：
官方文档:https://docs.python.org/2/library/multiprocessing.html#module-multiprocessing 1. 同步类型,如锁,条件和队列官 ...
- noobSTL-1-配置器-2
noobSTL-1-配置器-2 第一级配置器 1. 功能分析 第一级配置器以malloc(),free(),realloc()等C语言函数来执行实际的内存配置. 使用C语言函数是因为C++并未直接提供 ...
- 【做题笔记】P1042 乒乓球
坑 #1:输入有若干行,但处理的时候要看成一个整体的信息.比如说第一行最后一局比分是 2:1 ,这时不算比完,这个比分要继承到第二行的信息中继续处理. 坑 #2:一局结束,当且仅当其中一方比分大于等于 ...
- 设置DataGridView的单元格颜色
RowPrePaint事件: private void dataGridView1_RowPrePaint(object sender, DataGridViewRowPrePaintEventArg ...
- Bugku-CTF之web8（txt？？？？）
Day29
- AcWing 847. 图中点的层次
队列 #include <cstdio> #include <cstring> #include <iostream> #include <algorithm ...
- Lc626_换座位
626. 换座位 SQL架构 小美是一所中学的信息科技老师,她有一张 seat 座位表,平时用来储存学生名字和与他们相对应的座位 id. 其中纵列的 id 是连续递增的 小美想改变相邻俩学生的座位. ...
- 【使用python urllib时出现[SSL: CERTIFICATE_VERIFY_FAILED]报错的解决方案】
"首先,这个报错是告诉你,你的证书有问题. 其次,出现这个问题的原因,在于Python本身. 问题原因 Python升级到2.7.9以后,引入了一个新特性. 当使用urllib打开https ...
- dk7和jdk8的一些新特性
本文是我学习了解了j 的一些资料,有兴趣的大家可以浏览下下面的内容. 官方文档:http://www.oracle.com/technetwork/java/javase/jdk7-relnotes- ...