<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

    <head>

        <title>弹出层</title>

        <meta charset="utf-8">

        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>

        <style>

            .black_overlay {

                display: none;

                position: absolute;

                top: 0%;

                left: 0%;

                width: 100%;

                height: 100%;

                background-color: black;

                z-index: 1001;

                -moz-opacity: 0.8;

                opacity: .80;

                filter: alpha(opacity=80);

            }

            .white_content {

                display: none;

                position: absolute;

                top: 10%;

                left: 10%;

                width: 80%;

                height: 80%;

                border: 16px solid lightblue;

                background-color: white;

                z-index: 1002;

                overflow: auto;

            }

            .white_content_small {

                display: none;

                position: absolute;

                top: 20%;

                left: 30%;

                width: 40%;

                height: 50%;

                border: 16px solid lightblue;

                background-color: white;

                z-index: 1002;

                overflow: auto;

            }

        </style>

        <script type="text/javascript">

            //弹出隐藏层

            function ShowDiv(show_div, bg_div) {

                document.getElementById(show_div).style.display = 'block';

                document.getElementById(bg_div).style.display = 'block';

                var bgdiv = document.getElementById(bg_div);

                bgdiv.style.width = document.body.scrollWidth;  // bgdiv.style.height = $(document).height();

                $("#" + bg_div).height($(document).height());

            };

            //关闭弹出层

            function CloseDiv(show_div, bg_div) {

                document.getElementById(show_div).style.display = 'none';

                document.getElementById(bg_div).style.display = 'none';

            };

        </script>

    </head>

    <body>

        <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />

        <!--弹出层时背景层DIV-->

        <div id="fade" class="black_overlay">

        </div>

        <div id="MyDiv" class="white_content">

            <div style="text-align: right; cursor: default; height: 40px;">

                <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>

            </div>

            目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。

        </div>

    </body>

</html>

懒人转载网友：https://blog.csdn.net/llayjun/article/details/79196465

html弹出div的更多相关文章

  1. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  2. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  4. 使用js弹出div刷新时闪烁解决方法

    <div style="visibility: hidden"> //弹出div内容 </div>

  5. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  6. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  7. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  8. 运用fancybox弹出div的方式弹出视频界面

    fancybox可以弹出很多窗体,甚至一个swf格式的小视频.但这样的swf视频播放的时候并没有任何的控件.只能重头看到尾,或者关闭.我们可以利用fancybox弹出div盒子的方式配合html5很快 ...

  9. 基于jquery ui修改的不依赖第三方的背景透明的弹出div

    效果图: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  10. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. jQuery 追加元素、拼接元素的方法总结（append、html、insertBefore、before等）

    1. append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同 (1) append()方法: $("#test&quo ...

  2. 小程序wx.request的封装

    第一次做小程序项目,这个封装方法是同学推荐的一个网址,对我帮助很大,如果想看代码部分,请看网址详细介绍 网络请求都写在Page里,每个请求都要重复的写wx.request以及一些基础配置: 每个页面里 ...

  3. MySQL 对分组后的同类数据进行拼接字符串

    MySQL 对分组后的同类数据进行拼接字符串 写后台方法时遇到个问题,需要将表内同一订单号的操作记录流水进行简单拼接输出,不想取出来再操作,找了个mysql的方法直接操作 //group_concat ...

  4. UDP套接字编程　返回系统时间

    计算机网络实验 简单UDP套接字编程 这是学校老师自己改进了一点的题目.我预习了好久才搞明白,同学来问的时候,一大堆简单问题实在是不想回答．．．所以,这时候我觉得博客是个好东西! 我的任务是做客户端和 ...

  5. mysql的常用操作

    基本操作 #1 操作文件夹(库) 增 create database db1 charset utf8; --指定格式为utf8 查 show databases; --查看所有的数据库 show c ...

  6. admin-6

    Admin06 基本权限访问方式(权限) 读取:允许查看内容-read r 写入:允许修改内容-write w 可执行:允许运行和切换-execute x 对与文本文件: r:cat head tai ...

  7. Java（日期、随机数、系统工具类）

    Date类 一般用于获取时间 Date date1 = new Date();//获取当前系统时间 Date date2 = new Date(10000);//获取从标准基准时间起10000毫秒的时 ...

  8. webpack学习笔记（五）

    1. 如果想编写一个libray的库,代码结构如下: -library -src -index.js -math.js -string.js math.js export function add(a ...

  9. Adventure 魔幻历险

    发售年份 1979 平台 VCS 开发商 雅达利(Atari) 类型 冒险 https://www.youtube.com/watch?v=YS-HYWRdb2g

  10. HBASE 优化之REGIONSERVER

    HBASE 优化之REGIONSERVER 一,概述 本人在使用优化regionserver的过程有些心得,借此随笔的机会,向大家介绍我的心得,有些是网上拿来的有些是自己在使用过程自己的经验,希望对大 ...