十四、制作优美的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) { ...
随机推荐
- 爬虫入门 requests库
写在最前的具体资料: https://2.python-requests.org//zh_CN/latest/user/quickstart.html https://www.liaoxuefeng. ...
- 8.10-Day2T1最小值
题目大意 裴蜀定理 题解 很简单... 我这个蒟蒻都猜的出来... 就求所有数的最大公约数 但注意 要加绝对值 因为gcd里面不能传负数 #include<cstdio> #inc ...
- 【Webex】加入会议是无法正常加入!提示“下载会议组件时无法获取正确的参数。 请联系技术支持以获取帮助。
来自:Cisco Webex帮助中心 https://help.webex.com/zh-cn/WBX9000023909/Error-Failed-to-get-correct-parameters ...
- 多核 CPU 和多个 CPU 有何区别?
原文来自:http://www.solves.com.cn/it/yj/CPU/2019-06-24/1122.html 多核CPU和多CPU的区别主要在于性能和成本.多核CPU性能最好,但成本最高: ...
- touch命令修改时间
实例[rhel7]: [root@localhost test]# stat 1.txt 文件:"1.txt" 大小:0 块:0 IO 块:4096 普通空文件设备:fd00h/6 ...
- session跨域共享问题解决方案
在讨论 session 跨域共享问题之前,我们首先要了解 session 做了什么,没做什么 1.HTTP是无状态的,也就是说服务器不知道谁访问过他,但是有时间,又需要我们去保留这个状态比如说用户的登 ...
- 陆金所退出市场,我说:趁现在,抓紧离开P2P市场,你赞同吗?
编辑 | 于斌 出品 | 于见(mpyujian) 18日,也就是前天,陆金所退出P2P市场的消息就像颗"重磅炸弹"一样,一波激起千层浪,陆金所作为全国最大财富平台之一,这次退出, ...
- Codeforces Round #579 (Div. 3) 题解
比赛链接:https://codeforc.es/contest/1203/ A. Circle of Students 题意:\(T\)组询问,每组询问给出\(n\)个数字,问这\(n\)个数字能否 ...
- Flex布局如何实现最后一个元素右对齐(CSS)
在最后一项元素使用样式: margin-left: auto;
- 用xshell连接VMware虚拟机中安装的Centos7系统
首先要保证你安装的Centos7系统的网路适配器使用的桥接模式,这个模式允许你安装再虚拟机中的Centos系统有一个自己的ip地址. 然后再虚拟机中登录你的Centos系统,用ip addr命令查看你 ...