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. MySQL中format()函数

    format()函数 format()函数:将数据内容格式化的,可以将数据格式化为整数或者带几位小数的浮点数(四舍五入). SELECT FORMAT();//取整 SELECT FORMAT();/ ...

  2. BZOJ3224 洛谷3369 Tyvj 1728 普通平衡树 splay

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3224 题意概括 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. ...

  3. <构建之法>阅读笔记6

    第九章:项目经理 是讲项目经理的作用功能和重要性,书里面主要讲的是微软的PM(Programe Manager)和其他团队PM(Project Manager)的区别,还介绍了PM的能力要求以及人物, ...

  4. 【Java】 剑指offer(50-1) 字符串中第一个只出现一次的字符

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 在字符串中找出第一个只出现一次的字符.如输入"abacc ...

  5. 011 处理模型数据时@ModelAttribute的使用

    一:说明 1.使用场景 在下面的场景中: 使用new对象时,最后的效果是两个被赋值了,但是还有一个值是空值的,这个不符合只更新两个值,另一个值不变的情况. 正确的做法: 三个值得数据不是new出来的, ...

  6. 《深入探索Androdi热修复技术原理（阿里巴巴）》--读书笔记

    No1: Hybrid就是原生和Html5混合开发app No2: 插件化方法Altas或者DroidPlugin No3: 热修复技术可以把更新补丁上传到云端,此时APP就可以直接从云端下拉补丁直接 ...

  7. uva 674 Coin Change 换钱币【完全背包】

    题目链接:https://vjudge.net/contest/59424#problem/A 题目大意: 有5种硬币, 面值分别为1.5.10.25.50,现在给出金额,问可以用多少种方式组成该面值 ...

  8. Linux虚拟机上安装redis

    1.检查安装依赖程序 yum install gcc-c++ yum install -y tcl yum install wget 2.获取安装文件 wget http://download.red ...

  9. 3682: Phorni 后缀平衡树 线段树

    国际惯例的题面: 考虑如果没有强制在线我们能怎么水掉这个题,先构造出字符串,各种方法求一下后缀数组,然后线段树维护区间rank最小的位置即可.然而他要求强制在线,支持插入后缀,并比较后缀大小(求ran ...

  10. E: Unable to locate package openjdk-8-jdk 及java version 切换

    在unbuntu14.04系统上安装 Open JDK 8 时遇到了如下问题: $ -jdk Reading package lists... Done Building dependency tre ...