<!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. 微信电脑版 v3.9.2.12 绿色便携版

    修改历史: 2023.03.01:自改官方 3.9.2.12 最新正式版本2023.01.31:自改官方 3.9.0.28 最新正式版本2023.01.11:自改官方 3.9.0.21 最新正式版本- ...

  2. PLC数据块中的偏移量

    PLC数据块中的偏移量是什么? 偏移量定义为:把存储单元的实际地址与其所在段的段地址之间的距离称为段内偏移,也称为"有效地址或偏移量". 段地址左移四位,与有效地址相加,就构成了逻 ...

  3. 网络图片转base64

    /**            * 网络图片转base64            * @param src            * @return            * @throws Excep ...

  4. ecplise项目启动出现permgen space异常内存不够

    1. java.lang.OutOfMemoryError: PermGen space PermGen space的全称是Permanent Generation space,是指内存的永久保存区域 ...

  5. 手写g++编译命令行工具笔记

    基本想法 为什么要写 CPPRUN: 如果要开警告开关,敲完整的编译代码还挺麻烦的 想要编译与运行一次性完成 Windows 的控制台本来是 cmd,后来有了 Powershell,但是后者不能用 & ...

  6. JS-变量存储

    1.存储(变量)JS中变量是存在栈内存中JS中的内存分两种:栈内存.堆内存 栈内存:存放变量 堆内存:存代码块(object和function) var fn=function()和function ...

  7. webpack 5 配置babel-loader babel7

    1.安装Balel目的: 在webpack中 默认只能处理部分 ES6的新语法,一些更高级的ES6或ES7的语法,webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack ...

  8. 常见Linux命令二

    常见Linux命令二 一:shutdown命令--用来系统关机命令. 语法:shutdown(选择)(参数) 常见选项:-r:shutdown之后重启 -h:将系统关机 二:reboot命令-- 重新 ...

  9. robots.txt 文件说明

    robots其实就是指Robots协议,Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过 ...

  10. 消息队列RocketMQ应用

    引用: https://www.cnblogs.com/ciel717/p/16180083.html 官方手册:https://help.aliyun.com/document_detail/442 ...