<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>div 遮罩层 弹窗</title>

<style type="text/css">

#Layer1 {

    height: 250px;

    width: 450px;

    border: 5px solid #999;

    margin-right: auto;

    margin-left: auto;

    z-index: 50;

    display: none;

    position: relative;

    background-color: #FFF;

}

#Layer1 #win_top {

    height: 30px;

    width: 450px;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #999;

    line-height: 30px;

    color: #666;

    font-family: "微软雅黑", Verdana, sans-serif, "宋体";

    font-weight: bold;

    text-indent: 1em;

}

#Layer1 #win_top a {

    float: right;

    margin-right: 5px;

}

#shade {

    background-color:#000;

    position:absolute;

    z-index:49;

    display:none;

    width:100%;

    height:100%;

    opacity:0.6;

    filter: alpha(opacity=60);

    -moz-opacity: 0.6;

    margin: 0px;

    left: 0px;

    top: 0px;

    right: 0px;

    bottom: 0px;

}

#Layer1 .content {

    margin-top: 5px;

    margin-right: 30px;

    margin-left: 30px;

}

body {

}

</style>

</head>

<body>

<div id="shade"></div>

<a href="#" onClick="shade.style.display='block';Layer1.style.display='block'">打开</a> <br />

<br />

<br />

<br />

<div id="Layer1">

  <div id="win_top">雅比斯 - 我的个人代码库 <a href="#" onClick="shade.style.display='none';Layer1.style.display='none'">关闭</a></div>

  <br />

  <div class="content"><a href="http://www.chinayabisi.com" target="_blank">http://www.chinayabisi.com</a></div>

</div>

</body>

</html>

说明：

#shade的高度设置的大一些就可以遮罩整个页面
以下代码放置在body 开始位置 就可以在页面居中，不居中自己再调试一把吧
<div id="Layer1">

  <div id="win_top">雅比斯 - 我的个人代码库 <a href="#" onClick="shade.style.display='none';Layer1.style.display='none'">关闭</a></div>

  <br />

  <div class="content"><a href="http://www.chinayabisi.com" target="_blank">http://www.chinayabisi.com</a></div>

</div>

div 遮罩层 弹窗的更多相关文章

  1. jquery实现div遮罩层

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

  2. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

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

  3. JS+CSS简单实现DIV遮罩层显示隐藏

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

  4. 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  5. jQuery带遮罩层弹窗实现（附源码）

    1.CSS样式 <style type="text/css"> body { font:11px/1.6em Microsoft Yahei; background:# ...

  6. DIV遮罩层传值

    今天费了很大的劲儿才搞定!下面贴出代码和总结: 1.首先是前台代码: <%@ Page Title="" Language="C#" MasterPage ...

  7. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...

  8. Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  9. 前端小结（3）---- 添加遮罩层，并弹出div

    有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...

随机推荐

  1. js怎么将光标移动特定的位置：

    第一种方法: a 标签的锚: 将a标签的herf='#element_id_name'  即可 <a href="#comment_content" class=" ...

  2. 安装Discuz开源论坛

    11.添加mysql普通用户 接着上篇的lamp这篇安装Discuz 配置虚拟主机 1.打开虚拟主机配置 [root@NFS-31 ~]# vim /usr/local/apache2/conf/ht ...

  3. INSPIRED启示录 读书笔记 - 第37章 大众网络服务产品

    十大要点 1.可用性:大众网络服务产品必须具备良好的用户体验 2.人物角色:按典型特征将用户分类,抽象出有代表性的用户类型(人物角色) 3.扩展性:应该不间断地考虑扩展性问题,永远留有余地,不到万不得 ...

  4. java基础之bit、byte、char、String

    bit 位,二进制数据0或1 byte 字节,一个字节等于8位二进制数 char 字符, String 字符串,一串字符 常见转换 1 字母  = 1byte = 8 bit 1 汉字  = 2byt ...

  5. 定时任务 Linux cron job 初步使用

     查看定时任务的命令为:crontab -l   编辑定时任务的命令为:crontab -e   (编辑后立即生效 若注释可在行首加#  同vi)         定时任务说明       每一行为一 ...

  6. Mysql -- You can't specify target table 'address' for update in FROM clause

    做地址管理时,需要先根据要设为默认的地址的用户将用户的其他地址都设置为非默认 需要select出用户id然后update 原语句 update address set isdeafult = 0 wh ...

  7. sqoop1.4.6 全量导入与增量导入 与使用技巧

    全量导入: sqoop import --connect jdbc:mysql://192.168.0.144:3306/db_blog --username root --password 1234 ...

  8. wab框架

    http协议 一.http简介        1.HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等).       2.HTTP是一个属于应用层的面向对象的协 ...

  9. Virtio SCSI设备介绍

    Qemu的存储栈 在KVM虚拟化环境中,当客户机的内核存储系统像在物理机上一样通过页缓存.文件系统.通用块设备层运行到实际设备驱动时,这时驱动对设备寄存器的访问会触发CPU从客户机代码切换到物理机内的 ...

  10. Eclipse集成c与c++

    1.eclipse 开普勒版本 2.安装mingw 3.配置环境变量mingw的 path 加入;C:\MinGW\bin 4.eclipse 中的市场搜索 CDT