十四、制作优美的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>&nbsp;&nbsp;设置活动截止日期：</label>

         <input type="text"  style="width:152px" id="activityEndTime" class="commonClass" value = ""/>

     </div>

     <div class="div-inline">

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

         <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) { ...

随机推荐

关于Ajax请求的JS封装函数
每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式, get/post 'url' : 提交地址, ...
如何在Access中使用SQL语句
如何在Access中使用SQL语句创建,查询设计,弹出[显示表]窗口,点击[关闭]将该窗口关掉.这时软件会进入[设计]工具栏,我们点击工具栏左侧的[SQL视图].[SQL视图]默认选择的是[设计视图 ...
WSAGetLastError错误原因的博客与时间函数
https://blog.csdn.net/skc361/article/details/9254507 https://blog.csdn.net/HK_5788/article/details/4 ...
Bugku-CTF分析篇-中国菜刀(国产神器)
中国菜刀国产神器
504，什么是FOUC？怎么避免
Flash of Unstyled Content :用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再重新显示文档,造成页面闪烁解决办法:把样式表放到文档的<head& ...
Go_channel
通道可以被认为是Goroutines通信的管道.类似于管道中的水从一端到另一端的流动,数据可以从一端发送到另一端,通过通道接收. 在前面讲Go语言的并发时候,我们就说过,当多个Goroutine想实现 ...
解决vim选中文字不能复制的问题
转载自本人独立博客:https://liushiming.cn/2020/01/18/vim-copy-issue-in-iterm2/ 概述最近发现在iterm2中打开vim,用鼠标选中文字,并用 ...
使用node.js实现多人聊天室（socket.io、B/S）
通过B/S架构实现多人聊天,客户端连接服务器,发送信息,服务器接收信息之后返回给客户端. 主要是通过socket.io实现浏览器和服务器之间进行实时,双向和基于事件的通信. socket.io官方文档 ...
linux中的diff命令
今天在公司的代码中看到了一个用的不是很多的命令diff,一开始以为不是,后来一查发现还真有这个命令,有关它的详细资料在这个网址中查看[http://blog.chinaunix.net/uid-253 ...
spring 基于xml的申明式AspectH中的后置通知的返回值获取
spring 基于xml的申明式AspectH中的后置通知的返回值获取 1. 配置文件 <aop:config> <aop:aspect ref="myAspect&quo ...

十四、制作优美的div弹框

十四、制作优美的div弹框的更多相关文章

随机推荐

热门专题