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. 2015 Benelux Algorithm Programming Contest E-Excellent Engineers

    题目大意:有n个人,每个人都有三个物品,排名分别为a[ i ],b[ i ],b[ i ],现在要删掉其中的一些人 如果一个人x的三个物品的排名为a[ x ],b[ x ],b[ x ],若存在另一个 ...

  2. Linux useradd -M -s

    groupadd mysql #创建mysql分组 useradd -M(不创建主目录) -s(不允许登录) /sbin/nologin mysql -g(加入mysql组) mysql

  3. 通过pyqt5实现俄罗斯方块游戏例子

    # *_* coding:utf-8 *_* # 开发团队:中国软件开发团队# 开发人员:Administrator# 开发时间:2019/3/17 2:13# 文件名称:RussiaBoard# 开 ...

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

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

  5. 附005.Docker Compose文件详解

    一 Docker Compose文件简介 compose文件使用yml格式,主要分为了四个区域: version:用于指定当前docker-compose.yml语法遵循哪个版本 services:服 ...

  6. React Native之基于AsyncStorage的离线缓存框架设计

    1.为什么要离线缓存? 宏观上来说: 提升用户体验: 我们要为用户提供流畅的APP操作体验,但我们无法保证所有用户的网络流畅度是好的,所以我们需要离线缓存来提升用户体验. 节省流量: 节省流量又分为两 ...

  7. Python学习——web框架

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. WSGI(Web Server Gateway Interface)是一种规范,它定义了使用p ...

  8. android studio的汉化 教程 及解析

    android studio的汉化 教程 及解析 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 313134555 @qq.c ...

  9. 洛谷 P1114 “非常男女”计划

    To 洛谷.1114 “非常男女”计划 题目描述 近来,初一年的XXX小朋友致力于研究班上同学的配对问题(别想太多,仅是舞伴),通过各种推理和实验,他掌握了大量的实战经验.例如,据他观察,身高相近的人 ...

  10. (转)理解classloader

    ClassLoader翻译过来就是类加载器,普通的Java开发者其实用到的不多,但对于某些框架开发者来说却非常常见.理解ClassLoader的加载机制,也有利于我们编写出更高效的代码.ClassLo ...