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. ThreadLocal、Volatile、synchronized、Atomic

    前言 对于ThreadLocal.Volatile.synchronized.Atomic这四个关键字,我想一提及到大家肯定都想到的是解决在多线程并发环境下资源的共享问题,但是要细说每一个的特点.区别 ...

  2. Python3中urllib使用介绍

    Py2.x: Urllib库 Urllin2库 Py3.x: Urllib库 变化: 在Pytho2.x中使用import urllib2——-对应的,在Python3.x中会使用import url ...

  3. Python常用模块--datetime

    datetime是Python专门用于处理日期和时间的标准模块. 1.获取当前的本地时间 #!/usr/bin/env python# -*- coding:utf-8 -*-__author__ = ...

  4. 不一样的go语言-gopher

    前言   gopher原意地鼠,在golang 的世界里解释为地道的go程序员.在其他语言的世界里也有PHPer,Pythonic的说法,反而Java是个例外.虽然也有Javaer之类的说法,但似乎并 ...

  5. where field in

    SELECT * FROM xx  WHERE field IN ('11','22','33');

  6. Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(三)--前后端环境配置

    前言 之前都是介绍一些基础知识,在这一节,我们就要开始实战coding了.正所谓磨刀不误砍柴工,准备工作显得尤为重要.很多demo只是追求效果的实现,并不注重整个demo的架构性.从我个人的角度看来, ...

  7. hihoCoder挑战赛19 A.Rikka with Sequence(状压DP)

    题目链接 比赛链接 \(Description\) \(Solution\) 参考:https://www.cnblogs.com/SovietPower/p/9781573.html 暴力:\(f[ ...

  8. python计算文件夹大小——os.walk

    下面提供一种利用os.walk()快捷的计算指定文件夹大小的方法 话不多说,直接上代码 简略版: import os def get_file_size(file_path, size=0): for ...

  9. java程序中实现打开 某个指定浏览器

    package com.test; import java.lang.reflect.Method; //实现打开浏览器并跳到指定网址的类 public class BareBonesBrowserL ...

  10. Knockout.Js官网学习（options绑定）

    前言 options绑定控制什么样的options在drop-down列表里(例如:<select>)或者 multi-select 列表里 (例如:<select size='6' ...