十四、制作优美的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) { ...
随机推荐
- mybatis报错：A query was run and no Result Maps were found for the Mapped Statement
转自:https://blog.csdn.net/u013399093/article/details/53087469 今天编辑mybatis的xml文件,出现如下错误: 程序出现异常[A quer ...
- python调用sqlite
参考资料:https://www.liaoxuefeng.com/wiki/1016959663602400/1017801751919456 https://www.cnblogs.com/lia ...
- LEETCODE80. 删除排序数组中的重复项
俺的: class Solution: def removeDuplicates(self, nums: List[int]) -> int: if(len(nums)==0): return ...
- Python，正则表达式 - (?:)示例
例如正则表达式a(?:b),匹配后没有包含'b'的分组 >>> string 'ab ac' >>> import re >>> string = ...
- 从相亲的角度理解 K8S 的 Node Affinity, Taints 与 Tolerations
这是昨天晚上阅读园子里的2篇 k8s 博文时产生的想法,在随笔中记录一下. 这2篇博文是 K8S调度之节点亲和性 与 K8S调度之Taints and Tolerations . 如果我们把 node ...
- sql注入基础知识
信息安全概论课堂作业 SQL注入之万能密码漏洞 第一道题是牵扯到了万能密码漏洞 用户名先输入个’ 返回了sql报错语句,猜测存在sql注入漏洞 使用万能密码测试 登陆成功 原理 假设登录框处的判断代码 ...
- 7-3 Path to Infinity（还没ac)
留坑 #include<bits/stdc++.h> using namespace std; ; ; typedef long long ll; string s,t; ,tol2=,t ...
- 吴裕雄 python 机器学习——半监督学习标准迭代式标记传播算法LabelPropagation模型
import numpy as np import matplotlib.pyplot as plt from sklearn import metrics from sklearn import d ...
- session跨域共享问题解决方案
在讨论 session 跨域共享问题之前,我们首先要了解 session 做了什么,没做什么 1.HTTP是无状态的,也就是说服务器不知道谁访问过他,但是有时间,又需要我们去保留这个状态比如说用户的登 ...
- linux日常运维工作
Linux的使用环境也日趋成熟,各种开源产品络绎不绝,大有百花齐放的盛景,那么当Linux落地企业,回归工作时,我们还要面对这Linux运维方面的诸多问题,今天我们特意组织一场有关Linux 在企业运 ...