<!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. ubuntu关闭631（cups）端口

    在ubuntu17.04环境下使用nmap扫描自己机器,发现631端口处于开启状态,将其输入到浏览器,可以看出是网络打印机的服务: 这个端口开着总是那么的刺眼,(5.12全球爆发的勒索病毒让人不寒而栗 ...

  2. 单文件夹下的C程序如何编写Makefile文件

    通过学习已经学会了GCC的一些基础的命令,以及如何将C语言源代码编译成可执行文件. 我们已经知道在linux环境下编译源码时,常会有以下三个步骤: ./configure make make clea ...

  3. java 监控命令

    jps 查找java所有进程及对应pid -v 列出启动参数 有些默认的参数,使用-v是看不到的,需要执行如下: jcmd pid VM.flags jstack pid 查看该进程的堆栈信息 找到进 ...

  4. ANT+JMETER集成3 (添加邮件附件）

    在build.xml文件<email>中加入下面几行代码 <fileset dir="C:\apache-jmeter-3.0\html/"> <in ...

  5. rapidjson代码封装类

    rapidjson代码封装类 以下代码封装了rapidjson增删改查等基本操作: /********************************************************* ...

  6. keystone cache

    http://docs.openstack.org/juno/config-reference/content/section_keystone.conf.html http://docs.opens ...

  7. js装饰者模式

    装饰者模式是为已有的功能动态地添加更多功能的一种方式.当系统需要新功能的时候,是向旧的类中添加新的代码.这些新加的代码通常装饰了原有类的核心职责或主要行为,在主类中加入了新的字段,新的方法和新的逻辑, ...

  8. 实现继承+接口继承+虚方法+隐藏方法+this/base+抽象类+密封类/方法+修饰符

    概念: 在上一节课中学习了如何定义类,用类当做模板来声明我们的数据. 很多类中有相似的数据,比如在一个游戏中,有Boss类,小怪类Enemy,这些类他们有很多相同的属性,也有不同的,这个时候我们可以使 ...

  9. spring boot + thymeleaf 报错 org.thymeleaf.exceptions.TemplateInputException

    org.thymeleaf.exceptions.TemplateInputException: Error resolving template "admin/verifyPassword ...

  10. 第六次scrum meeting记录

    文章负责:刘斯盾 日期:2017年10月30日 会议地点:新主楼F座二楼 各组员工作情况 团队成员 昨日完成任务 明日要完成任务 赵晓宇 评分界面搭建 issue17 课程列表页面搭建 issue20 ...