<!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. 字符串哈希小结(BKDR,RK)

    前言 A:这么简单的东西,怎么现在才学?? B:别提了,还不是因为菜o(╥﹏╥)o A:那打算讲些什么东西 B:\(BKDRHash\).\(Rabin-karp\)以及简单应用 简洁 所谓字符串哈希 ...

  2. HA 脑裂原理

    HA 脑裂原理 “裂脑”,乃一个形象的术语,系HA系统危机情景. 引子:“裂脑”是治疗“癫痫”病的一种手术.医生们认为癫痫病发作是由于大脑“异常放电”所至.为了阻止“异常放电”波及整个大脑(左.右半脑 ...

  3. 递归实现N皇后问题

    其实是看到一位名为“活在二次元的伪触”的博主昨天还是前天写了篇这个题材的笔记,觉得有点意思,于是想自己来写写. 其实我发现上述那位同学写N皇后问题写得还不错,文末也会给出这位同学用通过递归的方法实现N ...

  4. 通过加载Xib文件来创建UITableViewCell造成复用数据混乱问题方案

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...

  5. 对正交频分复用OFDM系统的理解

    OFDM系统 正交频分复用OFDM(Orthogonal Frenquency Division Multiplexing)是一种多载波调制技术. 基本思想:在发送端,它将高速串行数据经过串并变换形成 ...

  6. 用javascript实现的验证码

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">     ...

  7. ssh框架整合意义

    一次次学习,一次次不一样的进一步理解. 一.Struts2.String.Hibernate框架的整合的意义: 1.需要将所有的对象进行统一管理(action动作类:sessionFactory) 2 ...

  8. 【atcoder】Two Sequences [arc092 D]（思维题）

    题目传送门:https://arc092.contest.atcoder.jp/tasks/arc092_b 这场arc好难啊...这场感觉不像正常的arc...其实这道题还可以更早写出来的,但是蒟蒻 ...

  9. MSER最稳定极值区域源码分析

    最稳定极值区域介绍 如把灰度图看成高低起伏的地形图,其中灰度值看成海平面高度的话,MSER的作用就是在灰度图中找到符合条件的坑洼.条件为坑的最小高度,坑的大小,坑的倾斜程度,坑中如果已有小坑时大坑与小 ...

  10. Jboss remote getshell (JMXInvokerServlet) vc版

    #include "stdafx.h" #include <Windows.h> #include <stdio.h> #include <winht ...