<!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. CentOS 7 yum安装MongoDB

    1.配置MongoDB的yum源 cd /etc/yum.repos.d vim mongodb-org-6.0.repo 2.添加下载配置文件(这里使用阿里云的源),保存退出 [mngodb-org ...

  2. textfsm

    from concurrent.futures import ThreadPoolExecutor import netmiko import os from threading import Loc ...

  3. Linux系统安全：SNAT和DNAT的实现

    一.SNAT1.SNAT实验目的公司内有2台机器,但是只有一个公网ip,利用SNAT技术实现2台私网地址都可以访问公网. 2.SNAT实验环境准备①三台服务器:PC1客户端.PC2网关.PC3服务端. ...

  4. word生成产生错误的原因

    技术背景 很多时候我们网站或者系统需要提供一些word文件,例如证明.docx或者订单.docx等文件供用户下载打印等. 用Java操作word文档,毫无疑问,当下最流行apache poi,对于po ...

  5. flink 1.10.0源码编译

    1.安装git yum -y install git 2.安装maven 安装了3.3以下低版本的maven会有提示升级,这里安装3.6.3 wget https://mirrors.tuna.tsi ...

  6. PhpSpreadsheet导出科学记数转成字符串

    $logistic_code."\t"   加上\t即可转成字符串

  7. GET请求数据量大造成的问题

    在实际的开发过程中,我们偶尔或者遇到过要导出列表中所有的数据.假设列表中有十万条数据,那么导出所有,意味着要大批量的走查询接口,通常我们的后台的API接口GET请求支持的查询长度不得大于1000,(比 ...

  8. ajv参数验证

    1.验证枚举类型 var schema = { "properties": { "data": { "type": "object ...

  9. Win10 U盘不自动显示

    Win+R,在窗口中输入 命令services.msc,然后点击确定按钮:这时就会打开Windows10的服务列表,在列表中找到Plug and Play服务项.双击后看一下该服务是否启动,先停止,然 ...

  10. Linux 配置共享目录方法

    配置共享目录有三种方法: 第一种:使用Vmware自带的文件共享的功能,进入Vmware,点击虚拟机选项,然后点击"设置",再点击标签"选项"这一项,找到&qu ...