十四、制作优美的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) { ...
随机推荐
- 2019-2020-2 20174314王方正 《网络对抗》 Exp0 Kali安装
本博旨记录安装Kali的具体步骤. 一.Vmware的安装 略. 二.Vmware的配置 选择[文件]-[新建虚拟机]. 出现新建虚拟机导向,按照以下图示配置每一步.
- ubuntu16.04spyder闪退
解决办法我试了好用 sudo pip install --upgrade html5lib==.0b8 完事.
- [转] Go 的并发模式：Context
[转] Go 的并发模式:Context tips:昨天看了飞雪无情的关于 Context 的文章,对 go 中 Context 有了一个初步的认识.今天看到一个 go 官方博客的关于 Context ...
- 1.java-谈谈接口
1.面向接口给程序带来的便利和灵活性 List li = new ArrayLIst(); 为什么不写成 ArrayList li = new ArrayLIst(); 2.接口就相当于一些类的规范, ...
- drf-jwt手动签发与校验，drf小组件：过滤、筛选、排序、分页
复习 """ 频率组件:限制接口的访问频率 源码分析:初始化方法.判断是否有权限方法.计数等待时间方法 自定义频率组件: class MyThrottle(SimpleR ...
- java读/写文件
读取文件参考:https://blog.csdn.net/weixin_42129373/article/details/82154471 写入文件参考:https://blog.csdn.net/B ...
- Go_ioutil包
1. ioutil包的方法 // Discard 是一个 io.Writer 接口,调用它的 Write 方法将不做任何事情 // 并且始终成功返回. var Discard io.Writer = ...
- pyqt5 通过QLinearGradient 绘制取色板
要绘制HSV取色板,一般通过绘制前景色和背景色的方式实现,先绘制前景,然后绘制背景,前景是HSV颜色空间,从左到右,背景是亮度,从上到下,xs和ys是鼠标的当前的位置. def graphicsVie ...
- [Jenkins] Jenkins的启动停止并修改默认端口
在Win系统下面,经常使用Jenkins今天自动化测试工作,但是在搭建的时候还是有些坑 1.选择性安装: 一般会选择windows,会下载一个压缩包,然后step by step就可以安装成功,这个方 ...
- dfs序与求子树子节点（染了色）的个数
https://blog.csdn.net/hpu2022/article/details/81910490 https://blog.csdn.net/qq_39670434/article/det ...