<!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. Django ORM --- 建表、查询、删除基础

    1.什么是ORM ORM的全称是Object Relational Mapping,即对象关系映射.它的实现思想就是将关系数据库中表的数据映射成为对象,以对象的形式展现,这样开发人员就可以把对数据库的 ...

  2. Ubuntu: 无法使用su命令

    Ubuntu 无法使用su命令解决方案 在Ubuntu上编译Qt环境时发现无法使用su命令切换到root用户,通过网上查找发现解决方案如下: xt@xt-ubuntu:~$ su密码: su:认证失败 ...

  3. java中如何高效判断数组中是否包含某个特定的值

    四种不同方式检查数组是否包含某个值 使用List: public static boolean useList(String[] arr, String targetValue) { return A ...

  4. FreeMarker 使用实例

    以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: 1,文本:直接输出的部分 2,注释:<#-- ... - ...

  5. [转载]Struts2.1.6+Spring2.5.6+Hibernate3.3.

    原文地址:Struts2.1.6+Spring2.5.6+Hibernate3.3.1全注解实例详解(一)(转载大象)作者:沉睡森林  在JavaEE企业级开发中,以SSH2框架为核心的应用非常广,大 ...

  6. [kuangbin带你飞]专题十 匹配问题 一般图匹配

    过去做的都是二分图匹配 即 同一个集合里的点 互相不联通 但是如果延伸到一般图上去 求一个一般图的最大匹配 就要用带花树来解决 带花树模板 用来处理一个无向图上的最大匹配 看了一会还是不懂  抄了一遍 ...

  7. 美化tp5.1跳转提示

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. underscore中template的使用Demo

    在客户端渲染数据时,一般可通过underscore中的template对数据模板进行渲染,例如: 定义模板,需要把type类型设置为“text/template” <script type=&q ...

  9. QT5 QtreeWidget 实现点击item事件以及右键菜单删除item 和 重命名item

    1.new 一个QTreeWidget 对象,并设置头标签,和根节点(个人程序需要) QTreeWidget* treeWidget = ui.treeWidget;//我已经在ui设计师中拖了一个Q ...

  10. python中的list和array的不同之处 2

    版权声明:本文为博主非原创文章,未经博主允许可以转载.     Python中的list和array的不同之处 python中的list是python的内置数据类型,list中的数据类不必相同的,而a ...