CSS+js弹出居中的背景半透明div层
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0px}
#big{width:100%; height:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px;background-color:#999;filter: Alpha(opacity=20); -moz-opacity:0.20; opacity:0.20; display:none; z-index:5}
#small{ border:5px solid #CCC; width:400px; padding:10px; position:absolute; top:35%; left:20%; display:none; background:#FFF; z-index:10}
</style>
<script type="text/javascript">
function show()
{
var divBig=document.getElementById("big");
var divSmall=document.getElementById("small");
var v_left=(document.body.clientWidth-divSmall.clientWidth)/2 + document.body.scrollLeft;
var v_top=(document.body.clientHeight-divBig.clientHeight)/2 + document.body.scrollTop;
divBig.style.top=document.body.scrollTop+'px';
divSmall.style.left=(v_left-200)+'px';
divSmall.style.top=(document.body.scrollTop+((document.body.clientHeight/2)-50))+'px';
divBig.style.display="block";
divSmall.style.display="block";
document.body.style.overflow="hidden";
}
</script>
</head>
<body>
<div id="big"></div>
<div id="small">
content
</div>
<button onClick="show()"> please Click me </button>
</body>
</html>
转载于:https://www.cnblogs.com/hx214blog/archive/2013/05/21/3091950.html
CSS+js弹出居中的背景半透明div层相关推荐
- html 弹出层 边框半透明,js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: js+CSS弹出居中的背景半透明div层 body{margin:0px;} #bg{widt ...
- html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
- js弹出对话框(半透明背景，兼容各浏览器)
js弹出对话框在某些情况下是一个很好的工具,通过半透明的设置,使得弹出对话框在弹出时仍然能够看到网页内容,会让用户有一个很好的界面体验. 而且懒人萱已做过测试,可以兼容现在的所有主流浏览器,所以你可以 ...
- php网站自动变暗,如何使用JS弹出DIV并使整个页面背景变暗
这次给大家带来如何使用JS弹出DIV并使整个页面背景变暗,使用JS弹出DIV并使整个页面背景变暗的注意事项有哪些,下面就是实战案例,一起来看一下. 1.首先写一个遮罩层p,然后再写一个弹窗的p 提示 ...
- JS弹出DIV并使整个页面背景变暗功能的实现代码
1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...
- js 弹出框 背景不滑动 方案
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 js 弹出框 ...
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
- html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...
- 底部弹出PopupWindow并且背景变为半透明效果
来自:http://blog.csdn.net/LANG791534167/article/details/48985101 先来看看运行效果图 [方式一]实现从底部弹出PopupWindow 原理: ...
最新文章
- Qt QML页面翻转控件封装
- SpringBoot的email发送ssl协议格式
- 为什么我现在不建议你买 5G 手机？｜CSDN博文精选
- Android中添加字串资源出现问题
- Mysql utf8 和utf8mb4 的区别
- shell命令执行操作仍需点击y确认问题的处理
- HDFS +zookeeper实现高可用
- XML 文档四种解析放式
- java怎么播放视频_java 播放视频
- spring boot 设置时区
- matlab 平滑曲线连接_从零开始的matlab学习笔记——（16）函数绘图
- 关于计算机的英语谜语,英语的谜语大全及答案
- 英国化学实验室的管理模式
- php 开头结尾,php 字符串 以什么开头 开头开始 以什么结尾 结束 包含 startWith endWith 字符串包含 有大用...
- Django开发学习之Ajax(二)
- 触发器+日志+备份与恢复
- ---coc（clash of clan阵型分析）---
- 数据结构与算法邹永林PDF_真香系列：耗时大半个月收整全套「Java架构进阶pdf」没白费，终于可以安心备战2021了！...
- 雷电模拟器charles抓包失败处理
- 软件工程基础 实验2《需求分析》