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

随机推荐

js实现图片轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
在VS2017中配置VLD(Visual Leak Detector)内存泄漏检测工具
首先在官方下载VLD 下载地址: https://kinddragon.github.io/vld/ 此版本为V2.5.1,为最后发布版本,下载后安装.加入你的安装路径为:VLD_Path,后面会用到 ...
QT+VS中使用qDebug()打印调试信息无法显示
首先右键点击项目名称,找到最后一项属性然后依次设置为如图所示即可再次编译后,会弹出CMD窗口,出现qDebug的调试信息.
8.10-Day2T1最小值
题目大意裴蜀定理题解很简单... 我这个蒟蒻都猜的出来... 就求所有数的最大公约数但注意要加绝对值因为gcd里面不能传负数 #include<cstdio> #inc ...
HPS—虚拟地址映射
HPS 如何对FPGA外设进行操作?hardware:在Qsys中将外设连接到AXI bridge上software:映射外设物理地址到到应用程序可以操作的虚拟地址,应用程序通过得到的虚拟地址入口控制 ...
联网调试DE1
步骤:打开PUTTY,com3,串口,115200 重启开发板, 输入root, 输入 cd /mnt 输入 ifconfig 尝试一下自动分配网址:udhcpc 网络直连失败,原因占时不知 ...
1.0 Jmeter 安装运行
1.百度搜索JDK进行下载JDK安装与环境变量配置http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html ---- 在JDK安装完 ...
atoi()函数的用法
注意:atoi()函数并不能单纯的把某字符串中的某字母转化为单个数字. 用法参考:https://www.cnblogs.com/ralap7/p/9171613.html
Codeforces Round #613 (Div. 2)D（贪心，分治）
构造两颗深度为30的字典树(根节点分别是0和1),结点只有0和1,从根节点向下DFS,贪心取答案. #define HAVE_STRUCT_TIMESPEC #include<bits/stdc ...
warmup
先简单了解下源码中的2个函数: <?php echo mb_strpos("朋友比生命还重要?或许是吧" . '?',"?"); echo "\ ...

十四、制作优美的div弹框

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

随机推荐

热门专题