<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>点击文字弹出一个DIV层窗口代码</title>
<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=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>示例弹出层:
    <a href = "javascript:void(0)"onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a>
     </p>
<div id="light" class="white_content">
    这是一个层窗口示例程序.<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口
      </a>
     </div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

  

html弹出div弹窗的更多相关文章

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

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

  2. 创建一个弹出DIV窗口

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

  3. js点击弹出div层

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

  4. jQuery 弹出div层

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Oracle游标总结

    1.声明游标 declare teacher_id ); teacher_name ); teacher_title ); teacher_sex ); cursor teacher_cur is ; ...

  2. libSVM 简易使用手册

    关于SVM的基础理论知识,可以google这篇文章<SVM的八股简介>,讲解得生动有趣,是入门的极好教材.作为拿来主义者,我更关心怎么用SVM,因此瞄上了台湾林智仁教授提供的libSVM. ...

  3. 使用Graham扫描法求二维凸包的一个程序

    #include <iostream> #include <cstring> #include <cstdlib> #include <cmath> # ...

  4. [CrunchBang]Linux系统下必要的中文字体

    sudo apt-get install ttf-droid ttf-wqy-zenhei xfonts-wqy ttf-wqy-microhei ttf-arphic-ukai ttf-arphic ...

  5. 【py网页】urlopen的补充,完美

    urllib 是 python 自带的一个抓取网页信息一个接口,他最主要的方法是 urlopen(),是基于 python 的 open() 方法的.下面是主要说明: 1 urllib.urlopen ...

  6. ubuntu下配置SVN服务器

    自己买的阿里云服务器.可是我老感觉没有SVN上传代码下载代码太不方便!决定配置个SVN服务器! 1.安装Subversion $ sudo apt-get install subversion $ s ...

  7. OpenStack 计算节点关机,虚拟机状态解决办法

    检查服务正常化 1 nova-manage service list 发现很多nova服务没有启动. 全部启动,直到nova-manage service list所有服务都是:)而不是XXX. 虚拟 ...

  8. mysql开启远程访问

    1.MySql-Server 出于安全方面考虑只允许本机(localhost, 127.0.0.1)来连接访问. 这对于 Web-Server 与 MySql-Server 都在同一台服务器上的网站架 ...

  9. 【python cookbook】【数据结构与算法】9.在两个字典中寻找相同点

    问题:寻找两个字典中间相同的地方(相同的键.相同的值等) 解决方案:通过keys()或者items()方法来执行常见的集合操作(比如求并集.交集和差集)

  10. 161104、NoSQL数据库:key/value型之levelDB介绍及java实现

    简介:Leveldb是一个google实现的非常高效的kv数据库,能够支持billion级别的数据量了. 在这个数量级别下还有着非常高的性能,主要归功于它的良好的设计.特别是LSM算法.LevelDB ...