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. Codeforces Round #437 (Div. 2, based on MemSQL Start[c]UP 3.0 - Round 2)

    Problem A Between the Offices 水题,水一水. #include<bits/stdc++.h> using namespace std; int n; ]; i ...

  2. Pig和Hive的对比

    Pig Pig是一种编程语言,它简化了Hadoop常见的工作任务.Pig可加载数据.表达转换数据以及存储最终结果.Pig内置的操作使得半结构化数据变得有意义(如日志文件).同时Pig可扩展使用Java ...

  3. 文档工具GitBook使用

    一.登陆注册 地址:https://www.gitbook.com/ 1.gitbook可使用github账号登录,如果已经注册github可以直接使用github账号登录 2.如果是github账号 ...

  4. 【Java】 剑指offer(65) 不用加减乘除做加法

      本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.×. ...

  5. (转)一位资深程序员大牛给予Java初学者的学习路线建议

    原文:http://geek.csdn.net/news/detail/238256 Java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是你是如何学习Java的 ...

  6. 基于Spring Boot的微服务搭建

    环境: 项目结构: 关键配置 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project ...

  7. pyinstaller打包pyqt文件（转）

    pyinstaller打包pyqt文件  https://www.cnblogs.com/dcb3688/p/4211390.html   打包pyqt文件 如何将pyqt生成exe的二进制文件呢,p ...

  8. Ubuntu 开机自启动SSH+远程关机

    Ubuntu 开机自启动SSH+远程关机   安装SSH 如何通过ssh远程登录linux系统 开机自启动ssh sudo gedit /etc/rc.locl # 输入密码 # 添加下面命令于 ex ...

  9. macos下mongoDB 3.4.5 添加用户、设置权限

    macos下mongoDB 3.4.5 添加用户.设置权限   在项目中需要根据项目运行环境访问,以不同的身份访问各自的db,所以研究了一下MongoDB的 需求: 给MongoDB添加两个用户分别用 ...

  10. 学习go语言一篇就够了(持续更新)

    前言:写博客也写了差不多一年了,我更多的时候是记录自己学习的情况,有时也有自己工作上遇到的bug,自己有时候也比较迷茫,不知道怎么去写博文,我也很想别人跟我提提建议,但是有时候觉得写写博客还是很有成就 ...