<!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. 2022-06-01内部群每日三题-清辉PMP

    1.采购部门要求项目经理提供一个项目的招标文件.这些文件中应该包含哪些内容? A.变更请求 B.选择的卖方 C.质量测量指标 D.建议邀请书 2.作为一个大型组织中关键项目的组成部分,阀门制造业务被外 ...

  2. 不是用第三方插件，用JS 解析 excel 文件

    参考:https://juejin.cn/post/7154395040507232264 excel 表格文件到底是什么 首先要解析 excel 文件,得先了解他是如何存储数据的,经过我百般搜索,终 ...

  3. Spark应用程序第三方jar文件依赖解决方案

    第一种方式 操作:将第三方jar文件打包到最终形成的spark应用程序jar文件中 应用场景:第三方jar文件比较小,应用的地方比较少 第二种方式 操作:使用spark-submit提交命令的参数: ...

  4. react -hook 项目搭建

    1.脚手架搭建 2.清除多余文件 3.搭建项目文件列表 4.引入公共样式 5.页面构建LOGIN 6.安装路由 v5 v6有区别 7.搭建路由文件router.js 懒加载配合supence使用 8. ...

  5. allure-动态参数，报告优化方法。

    1.allure.title方法 #前置需要在源文件:\venv\Lib\site-packages\allure_pytest\listener.py#在该文件修改为这样:test_result.p ...

  6. [iOS] iPhone，开发工具的一些杂项

    1.在safari的开发菜单里一直不显示我当前的iPhone,后来机缘巧合在 设置- 开发者 - Clear Trusted Computers ,重新信任电脑之后,就OK了(️)

  7. Lubuntu 18.04 自动登录

    参考文章:https://blog.csdn.net/qq_20965753/article/details/61420431 sudo nano /usr/share/lightdm/lightdm ...

  8. Gitbook部署

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

  9. 使用tkinter开发的一款登录和注册图形化界面

    目录 项目介绍 登录功能 登录界面展示 登录主要功能 登录部分源码 注册功能 注册界面展示 注册主要功能 注册部分源码 源码地址 项目介绍 使用tkinter开发的一款登录和注册图形化界面 使用tki ...

  10. mybatis中xml新增一条数据获取自增id

    在insert的标签里加两个属性:useGeneratedKeys="true"         keyProperty="patentId"   ,这个key ...