<!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. Java变量修饰符volatile

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...

  2. 理解$watch、$apply与$digest

    Angular环境 浏览器里面有一个事件队列(event queue),用户触发啥事儿,或者网络请求,延时操作(例如定时器之类),都是一个event,浏览器会轮询这些事件,然后调用这些回调(这里的回调 ...

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

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

  4. ceph安装各种报错

    [ceph_deploy][ERROR ] RuntimeError: Failed to execute command: ceph-disk-activate –mark-init sysvini ...

  5. 【arc101】比赛记录

    这场还好切出了D,rt应该能涨,然而这场的题有点毒瘤,700分的D没多少人切,更别说EF了.(暴打出题人)既然这样,干脆就水一篇博客,做个简单的比赛记录. C - Candles 这题是一道一眼题,花 ...

  6. 循环插入一条数据的sql写法

    DECLARE @i INTSET @i = 1WHILE @i > 0 BEGIN DECLARE @TransportFormMstID BIGINT; DECLARE @TradeOrde ...

  7. this关键字详解

    在java中,编译器会为每个对象分配一个this关键字.在代码中使用关键字可以使代码更优雅.下面我就列举一下this关键字常见的几种场景. 1.this代表当前对象调用成员变量和方法,也是用的最多的地 ...

  8. XE8_DataSnap设置

    1.参考文章 http://blog.csdn.net/l799623787/article/details/17002979 ZC: 系列在这里:http://www.cnblogs.com/Chi ...

  9. JavaWeb中的中文编码问题

    一.为什么要编码? 1.在计算机中存储信息的最小单元是1字节,即8个bit,所以能表示的字符范围是0~255个. 2.人类要表示的符号太多,无法用1个字节来完全表示. 这就是矛盾,要解决这个矛盾,就出 ...

  10. java:BufferedReader接受输入进来的2个数字,并将它们相加

    java:BufferedReader接受输入进来的2个数字,并将它们相加 //接受输入进来的2个数字,并将它们相加 BufferedReader buf = null; buf = new Buff ...