<!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. C++调用C#DLL并调试

    使用C++ 来调用C#DLL 并且调试程序 环境:使用VS studio 2019 C#项目的设置 1.C# -> 属性 -> 应用程序 -> 目标框架 ->.NET Fram ...

  2. Delete `␍` prettier/prettier Vue 可悬浮按钮

    Delete `␍` prettier/prettier 代码格式化不一致,换行符冲突.UNIX/Linux 使用的是 0x0A(LF), DOS/Windows 一直使用 0x0D0A(CRLF) ...

  3. Django的反向解析

    Django的请求生命周期是指用户在浏览器访问网页时,Django根据网址在路由列表里查找相应的路由,在从路由里找到视图函数或视图类进行处理,将处理结果作为相应内容返回浏览器并生成网页内容. 这个生命 ...

  4. k8s暂停一个pod

    模拟k8s暂停一个服务:kubectl scale --replicas=0 deployment/[deployment]  -n [namespace](如要恢复设置参数--replicas=1即 ...

  5. ASP.NET Core Filter如何支持依赖注入

    通过Filter来支持:分别有IResourceFilter AuthorizeFilter ActionFilter ExceptionFilter ResultFilter,Filter也被称为拦 ...

  6. Linux 第四节(shell脚本，IF，do,for）

    Shell脚本 1.批处理式: 2.交互式: 脚本声明   #!/bin/bash 脚本注释   #fakba;kb 脚本命令   ls pwd bash test.sh   //执行test.sh脚 ...

  7. python打包生成exe报错

    如图所示    如果出现的是这个问题可以可以考虑以下方法 首先卸载原先下载的 Pyinstaller pip uninstall pyinstaller 再执行以下代码,去github上下载 pip ...

  8. 21.ubuntu16.04 Minio 集群搭建

    MinIo是什么:MinIO 是一个基于Apache License v2.0开源协议的对象存储服务.它兼容亚马逊S3云存储服务接口,非常适合于存储大容量非结构化的数据. minio是一个非常轻量级的 ...

  9. axios响应拦截器无法显示响应头问题

    Access-Control-Expose-Headers 响应报头.跨域 公开响应头 问题现象: 前端无法获取响应头 Response Header 原因 问题原因:跨域问题 启用跨域请求(CORS ...

  10. [转]idea 试用30天“无限续费”idea破解

    首先打开idea设置 左上角点击file-->setting-->Plugins   https://plugins.zhile.io 然后点击 确定 ("OK") 点 ...