<!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. P4340 [SHOI2016]随机序列

    题目 P4340 [SHOI2016]随机序列 思维好题 做法 是否觉得水在于你是否发现加减是会抵消的,所以我们只用考虑乘的部分 一块乘只能前面无号(也就是前缀形式)才统计,所以用线段树维护区间前缀乘 ...

  2. poj 1273 ---&&--- hdu 1532 最大流模板

    最近在换代码布局,因为发现代码布局也可以引起一个人的兴趣这个方法是算法Edmonds-Karp 最短增广路算法,不知道的话可以百度一下,基于Ford-Fulkerson算法的基础上延伸的 其实我不是很 ...

  3. python实现免密码登录lunx服务器

    import paramikoimport oshostname='192.168.76.10'username='root'# password='123456'ssh=paramiko.SSHCl ...

  4. SSM mapper.xml

    MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL 映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JDBC 代码来比较,你会发现映射文件节省了大约 ...

  5. 【转】Android应用中使用AsyncHttpClient来异步网络数据

    摘要: 首先下载AsyncHttpClient的库文件,可以自行搜索,可以到下面地址下载 http://download.csdn.net/detail/xujinyang1234/5767419 测 ...

  6. BZOJ3244/UOJ122 [Noi2013]树的计数

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  7. 初识Django---视图

    MTV模型 一.Django的MTV分别代表:         Model(模型):负责业务对象与数据库的对象       Template(模板):负责如何把页面展示给用户      View(视图 ...

  8. Spring Boot入门——json数据处理

    1.引入fastJson插件 <!-- 引入fastjson插件 --> <dependency> <groupId>com.alibaba</groupId ...

  9. MSDN 单机 MVC 帮助文档

    因为微软的mvc框架也是从开源框架演变而来的,所以微软没把mvc帮助文档放到单击帮助文档中.sososos下载好msdn单机帮助后,却找不到 System.Web.MVC 等命名空间的东西. 解决办法 ...

  10. 最实用的 Linux 命令行使用技巧

    我们可能每天都会要使用到很多的 Linux 命令行. 我们也会网络上知晓一些使用它们的小技巧,但是如果我们没有时常来进行练习,就有可能会忘掉怎么去使用它们. 所以我就决定把那些你可能会忘记的小提示和小 ...