十四、制作优美的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) { ...

随机推荐

macos 杀掉端口命令行
sudo lsof -i:3000 kill 11111 1111就是pid下面的数字
【转载】JDBC操作LOB字段
转自:http://www.cnblogs.com/tengtao93/p/4984689.html 1.LOB(Large Objects)大对象,是用来存储大量的二进制和文本数据的一种数据类型(一 ...
【转载】Java中的容器讲解
转自:http://blog.csdn.net/garfielder007/article/details/52143794 Set,List,Map,Vector,ArrayList的区别 Java ...
Object的rest和spread方法
//将多个对象合并到一个对象里 const input = { a: 1, b: 2 } const test = { d: 5 } const output = { ...input, ...tes ...
static的使用总结
全局静态变量全局变量前加上关键字static,全局变量就定义成一个全局静态变量.,全局静态变量存储在静态存储区,在整个程序运行期间一直存在.全局静态变量在程序运行之前就存在. 初始化:未经初始化的全 ...
7_2 最大乘积（UVa11059）<枚举连续子序列>
给一个数字集合{ S1,S2,…,Sn },请从这个数字集合里找出一段连续数字,使他们的乘积是最大的.以Case 1为例子,2 x 4 = 8为这个集合的最大乘积:而Case 2则为2 x 5 x(– ...
当map的key为对象时，js无法解析key的属性值
重写对象的toString方法,按照json数据的规则然后前台string转json 控制台打印这个方法不需要引入其他包如果map的key属性过多,或者key是集合,可以在后台先转json,然后 ...
blog主题——樱花
贮存一下,blog代码 QAQ 页脚html  <script src="https://blog-static.cnblogs.com/file ...
事件和方法的区别，以input框的blur事件为例
1. 我们在原生的js中学到的事件 onblur 2. 使input框失去焦点的方法blur 3. jquery中的方法blur 是当input框失去焦点时触发的回调三者是不相同的事件:指的是一个 ...
[踩坑记录] windows10 应用商店打不开代码: 0x80131500
在某博客看到的方法,供参考,可以尝试一下,我的也是这么解决的1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可)2.点开高级往下拉,勾上&q ...

十四、制作优美的div弹框

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

随机推荐

热门专题