<!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>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display ="block";
document.getElementById("show").style.display ="block";
}
function hidediv() {
document.getElementById("bg").style.display ='none';
document.getElementById("show").style.display ='none';
}
</script>
<style type="text/css">
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
</div>
</body>
</html>

DIV CSS遮罩层（弹窗窗口）的更多相关文章

  1. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  2. div+css 遮罩层

    CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{    ...

  3. div 遮罩层 弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  5. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  6. CSS 遮罩层、滑出页面

    <style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5 ...

  7. CSS遮罩层简易写法

      现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...

  8. 前端页面给指定的div添加遮罩层，并且带有加载中的小旋转图片

    话不多说,先上代码,其实还是比较简单的 $("<div id='shade' style='opacity:0.85;background:white'></div> ...

  9. jQuery带遮罩层弹窗实现（附源码）

    1.CSS样式 <style type="text/css"> body { font:11px/1.6em Microsoft Yahei; background:# ...

  10. css遮罩层

    父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...

随机推荐

  1. django-drf知识点梳理

  2. Unity流水账2：视频播放之Video Player

    https://blog.csdn.net/shiyuedyx/article/details/81170309

  3. redis底层数据结构之整数集合(intset)

    整数集合(intset) 当一个集合只包含整数值元素,并且这个集合的元素数量不多时,redis会使用整数集合(intset)作为集合键的底层实现 整数集合用于保存整数值的集合抽象数据类型,它可以保存类 ...

  4. supervisor(进程管理)

    1.安装程序 yum -y install supervisor 2.路径文件 /etc/supervisord.d /etc/supervisord.conf 3.生成配置. echo_superv ...

  5. 【Java】BigDecimal

    BigDecimal转int类型 BigDecimal a=new BigDecimal(12.88); int b=a.intValue(); System.out.println(b);//b=1 ...

  6. 在springboot使用jsp

    在springboot配置jsp环境 在pom.xml中添加配置依赖 内容如下: <dependency> <groupId>org.springframework.boot& ...

  7. 加密算法和hash

    随着安全问题越来越被重视,公司也全面替换了HTTP为HTTPS.2015年iOS9的ATS到今年苹果更是放出话来,2017年全面支持HTTPS,不支持的App,在审核的时候可能会遇到麻烦.鉴于此,我有 ...

  8. Recycle Queue Sample

    public class RecycleQueue<T> { public int len; T[] v; int max; int front; int rear; public Rec ...

  9. python菜鸟学习： 15 GUI界面化记事本

    # -*- coding: utf-8 -*-import tkinter as tkdef getNewCreate(): passdef getCharcount1(sss): # 添加字数统 s ...

  10. Gitbook部署

    title: Gitbook部署 # 标题 date: 2020-06-14 08:00:00 借助Gitbook,写自己的第一本电子书 Gitbook部署 一.电脑环境 Git 环境,我的电脑上已经 ...