1.思路

使用DIV模拟弹出框，一共用三个div:

divWindow: 原来的界面内容区域

divLogin：要弹出的内容区域

divBackground：给弹出内容区域做个遮罩的区域。

点击 “请先验证身份” 按钮弹出框，在弹出框中输入数据后点击 “完成并关闭” 按钮回到原来的界面。

2.全部代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="../../../lib/jquery/jquery-1.9.1.min.js"></script>
  6.  
  7.     <style type="text/css">
  8.         body {
  9.             margin-top: 0px;
  10.             margin-left: 0px;
  11.             margin-bottom: 0px;
  12.             overflow: hidden;
  13.         }
  14.  
  15.         #divBackground {
  16.             width: 100%;
  17.             height: 100%;
  18.             left: 0px;
  19.             top: 0px;
  20.             z-index: 5000;
  21.             background-color: #000;
  22.             position: fixed;
  23.             filter: alpha(opacity=60);
  24.             opacity: 0.3;
  25.             display: none;
  26.         }
  27.  
  28.         #divLogin {
  29.             margin: auto 90px;
  30.             width: 618px;
  31.             height: 485px;
  32.             z-index: 5003;
  33.             position: fixed;
  34.             top: 50px;
  35.             display: none;
  36.             background-image: url(../Images/erdaizheng.png);
  37.         }
  38.  
  39.     </style>
  40.  
  41.     <script>
  42.  
  43.         function show() {
  44.  
  45.             DivShowAndHidden(
  46.                       "#divBackground"   //弹出的黑色背景层
  47.                       ,
  48.                       "#divLogin" //要显示的子层
  49.                       ,
  50.                       "#divWindow" //要隐藏的子层
  51.                   );
  52.         }
  53.  
  54.         function DivShowAndHidden(div1, div2, div3) {
  55.  
  56.             if (div1 != "" && $(div1).css("display") == "none")
  57.                 $(div1).show();
  58.  
  59.             if (div2 != "" && $(div2).css("display") == "none")
  60.                 $(div2).show();
  61.  
  62.             if (div3 != "" && $(div3).css("display") == "block")
  63.                $(div3).hide();
  64.         }
  65.  
  66.         function hide() {
  67.  
  68.             DivShowAndHidden1(
  69.                       "#divBackground"   //关闭黑色背景层
  70.                       ,
  71.                       "#divLogin" //关闭刚才弹出的子层
  72.                       ,
  73.                       "#divWindow" //显示刚才被隐藏的子层
  74.                   );
  75.  
  76.         }
  77.  
  78.         function DivShowAndHidden1(div1, div2, div3) {
  79.  
  80.             if (div1 != "" && $(div1).css("display") == "block")
  81.                 $(div1).hide();
  82.  
  83.             if (div2 != "" && $(div2).css("display") == "block")
  84.                 $(div2).hide();
  85.  
  86.             if (div3 != "" && $(div3).css("display") == "none")
  87.                 $(div3).show();
  88.         }        
  89.  
  90.     </script>
  91. </head>
  92. <body>
  93.     <div id="divBackground">
  94.         divBackground
  95.     </div>
  96.  
  97.     <div id="divLogin">
  98.         <div style="width:50%" >
  99.  
  100.             <br /><br /><br /><br /><br /><br /><br />
  101.                        
  102.             如果没有身份证，就输入账号密码：
  103.             <br /><br />
  104.                        
  105.             登录名：<input type="text">
  106.             <p></p>
  107.                        
  108.             密 码：<input type="text" />
  109.             <p></p>
  110.                        
  111.             <input type="button" onclick="hide()" value="完成并关闭" />
  112.             </div>
  113.     </div>
  114.  
  115.     <div id="divWindow">
  116.         <br />
  117.             divWindow 原来的表单窗口
  118.         <div>
  119.  
  120.             <br /><br />
  121.                        
  122.             你从哪里来：<input type="text">
  123.             <p></p>
  124.                        
  125.             要到哪里去：<input type="text" />
  126.             <p></p>
  127.                        
  128.  
  129.         </div>
  130.     </div>
  131.  
  132.         <input type="button" onclick="show()" value="请先验证身份" />
  133. </body>
  134. </html>

使用DIV弹出框的代码示例，备忘。的更多相关文章

  1. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  2. phoenixframe自己主动化測试平台对div弹出框（如弹出的div登陆框）的处理

    package org.phoenix.cases; import java.util.LinkedList; import org.phoenix.action.WebElementActionPr ...

  3. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  4. layui表格和弹出框的简单示例

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  6. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  7. 使用react+redux实现弹出框案例

    redux 实现弹出框案例 实现效果,点击显示按钮出现弹出框,点击关闭按钮隐藏弹出框 新建弹出框组件 src/components/Modal.js, 在index.js中引入app组件,在app中去 ...

  8. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  9. 如何使用angular-ui的弹出框

    在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...

随机推荐

  1. Einbahnstrasse HDU2923

    基础2923题 处理输入很麻烦 有可能一个城市有多辆破车要拖   应该严谨一点的 考虑所有情况 #include<bits/stdc++.h> using namespace std; ] ...

  2. xhprof扩展安装与使用

    目录 一.xhprof扩展安装步骤 二.xhprof的使用 总结 参考资料 一.xhprof扩展安装步骤 xhprof是PHP的一个扩展,最好也直接安装上graphviz图形绘制工具(用于xhprof ...

  3. C语言 —— 贪吃蛇

    参考视频:https://www.bilibili.com/video/av29580072/?p=1 GreedySnake.h #ifndef GREEDYSNAKE_H_INCLUDED #de ...

  4. JVM GC-----4、finalize()方法

    finalize()方法是Object类中定义的protect方法.每一个类都可以重写该方法,给出自己的实现.当类在被回收期间,这个方法就可能会被调用到. 为什么说可能?这是由于finalize()的 ...

  5. moodleform -转载于blfshiye

    Form API 表单API 文件夹 1.概述 2.亮点 3.使用方法 4.表单元素 4.1 基本表单元素 4.2 定制表单元素 5.经常使用函数 5.1  add_action_buttons($c ...

  6. 001.Keepalived简介

    一 Keepalived 定义 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以解决静态路由出现的单点故障问题.一个LVS服务会有2台服务器运行Keepalived,一台 ...

  7. [洛谷P2123]皇后游戏

    很抱歉,这个题我做的解法不是正解,只是恰巧卡了数据 目前数据已经更新,这个题打算过一段时间再去写. 目前在学习DP,这个会暂时放一放,很抱歉 这个题是一个国王游戏的变形(国王游戏就把我虐了qwq) 题 ...

  8. String 方法indexOf()

    indexOf()来测是否包含子字符串. indexOf(sub, start) 如果return 是-1 包含没有找到字段.

  9. 打开Word时出现“The setup controller has encountered a problem during install. Please ...”

    找到C:\Program Files\Common Files\Microsoft Shared\OFFICE12\Office Setup Controller,将这个文件夹删除或改名,就不再出现提 ...

  10. 洛谷.1919.[模板]A*B Problem升级版(FFT)

    题目链接:洛谷.BZOJ2179 //将乘数拆成 a0*10^n + a1*10^(n-1) + ... + a_n-1的形式 //可以发现多项式乘法就模拟了竖式乘法 所以用FFT即可 注意处理进位 ...