1.思路

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

divWindow: 原来的界面内容区域

divLogin：要弹出的内容区域

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

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

2.全部代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../../../lib/jquery/jquery-1.9.1.min.js"></script>

    <style type="text/css">

        body {

            margin-top: 0px;

            margin-left: 0px;

            margin-bottom: 0px;

            overflow: hidden;

        }

        #divBackground {

            width: 100%;

            height: 100%;

            left: 0px;

            top: 0px;

            z-index: 5000;

            background-color: #000;

            position: fixed;

            filter: alpha(opacity=60);

            opacity: 0.3;

            display: none;

        }

        #divLogin {

            margin: auto 90px;

            width: 618px;

            height: 485px;

            z-index: 5003;

            position: fixed;

            top: 50px;

            display: none;

            background-image: url(../Images/erdaizheng.png);

        }

    </style>

    <script>

        function show() {

            DivShowAndHidden(

                      "#divBackground"   //弹出的黑色背景层

                      ,

                      "#divLogin" //要显示的子层

                      ,

                      "#divWindow" //要隐藏的子层

                  );

        }

        function DivShowAndHidden(div1, div2, div3) {

            if (div1 != "" && $(div1).css("display") == "none")

                $(div1).show();

            if (div2 != "" && $(div2).css("display") == "none")

                $(div2).show();

            if (div3 != "" && $(div3).css("display") == "block")

               $(div3).hide();

        }

        function hide() {

            DivShowAndHidden1(

                      "#divBackground"   //关闭黑色背景层

                      ,

                      "#divLogin" //关闭刚才弹出的子层

                      ,

                      "#divWindow" //显示刚才被隐藏的子层

                  );

        }

        function DivShowAndHidden1(div1, div2, div3) {

            if (div1 != "" && $(div1).css("display") == "block")

                $(div1).hide();

            if (div2 != "" && $(div2).css("display") == "block")

                $(div2).hide();

            if (div3 != "" && $(div3).css("display") == "none")

                $(div3).show();

        }        

    </script>

</head>

<body>

    <div id="divBackground">

        divBackground

    </div>

    <div id="divLogin">

        <div style="width:50%" >

            <br /><br /><br /><br /><br /><br /><br />

                       

            如果没有身份证，就输入账号密码：

            <br /><br />

                       

            登录名：<input type="text">

            <p></p>

                       

            密 码：<input type="text" />

            <p></p>

                       

            <input type="button" onclick="hide()" value="完成并关闭" />

            </div>

    </div>

    <div id="divWindow">

        <br />

            divWindow 原来的表单窗口

        <div>

            <br /><br />

                       

            你从哪里来：<input type="text">

            <p></p>

                       

            要到哪里去：<input type="text" />

            <p></p>

                       

        </div>

    </div>

        <input type="button" onclick="show()" value="请先验证身份" />

</body>

</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. python：a += b 和 a = a + b

    在python中,不同的情况下,这两个表达式有着很大的区别: 如果a,b都是可变对象,例如list,a+=b实际是对a指向的地址上的值进行修改,即运算前后id(a)的值是不变的. 而a=a+b是不同的 ...

  2. Kubernetes学习系列

    这段时间项目组内想要引入Kubernetes,作为第二代容器调度引擎,故最近在系统的学习Kubernetes.整理了一些学习笔记,心得,放到博客中,一来记录自己的学习经过,二来看能否帮到有需要的同学. ...

  3. hdu 4513 最长不下降回文序列【manacher】

    <题目链接> 吉哥又想出了一个新的完美队形游戏!  假设有n个人按顺序站在他的面前,他们的身高分别是h[1], h[2] ... h[n],吉哥希望从中挑出一些人,让这些人形成一个新的队形 ...

  4. FutureTask实现超时任务

    最近主要在弄一些c/s的东西,以及对接一些外部的接口. 记下一些感觉有用的东西吧. java在1.5之后有Callable和Future可以获得任务执行完毕后的结果 结合ExecutorService ...

  5. NTFS的交换数据流ADS应用

    NTFS的交换数据流ADS应用   NTFS是Windows常用的文件系统格式.该格式支持交换数据流(Alternate Data Streams,缩写ADS)特性.该特性可以让多个文件流使用同一个文 ...

  6. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...

  7. idea 开发插件。

    作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 313134555 @qq.com idea 开发插件. Intellij ID ...

  8. BZOJ.5137.Standing Out from the Herd(广义后缀自动机)

    题目链接 \(Description\) 对于每个串,求在\(n\)个串中只在该串中出现过的子串的数量. \(Solution\) 建广义SAM.对每个串插入时新建的np标记其属于哪个串. 然后在pa ...

  9. js实现文字超出部分用省略号代替实例代码

    关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用CSS来完成的,今天给大家分享个Javascript实现这个功能的示例代码,有需要的可以参考借鉴. 话不多说 ...

  10. unity中尽量规避的C#写法

    首先想到的也就是重名的问题. 创建C#脚本的时候,引擎会搜索所有的文件夹里已有的C#脚本,若已经存在这个名字的脚本文件,那么系统就会报错:    再者,类名和方法名不能相同,理解来就是,方法名和类名相 ...