CSS弹出背景半透明窗口
- <script type="text/javascript" src="<ww:url value='/js/jquery-1.8.3.min.js'/>" language="javascript"></script>
- <script type="text/javascript">
- $(function(){
- var query = location.search;
- var equal_index = query.lastIndexOf("=");
- var result_index = query.indexOf("result");
- var submit_index = query.indexOf("submit");
- if(result_index != -1){
- if(query.substring(equal_index + 1) == 'success') {
- $("#msg").text('保存成功');
- pupopen();
- }
- }
- if(submit_index != -1){
- if(query.substring(equal_index + 1) == 'success') {
- $("#msg").text('上报成功');
- pupopen();
- }
- }
- });
- function pupopen(){
- $("#bg").css("display", "block");
- $("#popbox").css("display", "block");
- $(window).scroll(function(){ $(window).scrollTop(0); });// 禁止浏览器滚屏
- }
- function pupclose(){
- $("#bg").css("display", "none");
- $("#popbox").css("display", "none");
- $(window).unbind("scroll");// 恢复浏览器滚屏
- }
- </script>
- <style type="text/css">
- body{margin:0px;}
- #bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}
- #popbox{position:absolute;width:300px; height:200px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#FFFFFF;}
- </style>
- <body>
- 终于搞定这个效果了，IE和FF,OP均可以~
- 先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
- </br>
- <div id="bg"></div>
- <div id="popbox"><center style="margin-top:70px;"><img src="<ww:url value='/image/correct.jpg'/>" /> <span id="msg"></span></center>
- <br/><br/><br/>
- <img src="<ww:url value='/image/ok.png'/>" width="70" height="35" onclick="pupclose()" style="cursor:pointer"/>
- </div>
- </body>
CSS弹出背景半透明窗口的更多相关文章
- AOPR弹出Order Now窗口怎么办
当我们忘记了我们自己设置的office密码的时候,需要一款office密码破解软件来帮我们破解,Advanced Office Password Recovery就是这样的一款软件,其简称AOPR.试 ...
- php弹出式登录窗口并获得登录后返回值
一款bootstrap样式结合php制作的弹出式登录窗口,输入用户名和密码后,ajax传参给后台,并获得登录后返回值. hwLayer+ajax弹出登录框 $(function() { $('#for ...
- 自定义HttpModule，用于未登录用户，不弹出Windows认证窗口，而是跳转回SSO站点
2012年的一篇随笔记录,可以学习到如何自定义HttpModule,而具体里面针对需求开发的代码,可能未必能让大伙了解到什么,可快速扫描而过. using System; using System.W ...
- 纯CSS弹出层，城市切换效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- QT QDialog如何弹出一个子窗口
1. 假设已有一个QDialog的父窗口, 想弹出的子窗口为自己实现的myDialog : QDialog. myDialog 设计和平常的QDialog一样, childDialog : publi ...
- [Selenium]通过Selenium实现在当前浏览器窗口点击一个图标之后，弹出另外一个窗口，关闭这个窗口，再回到原来的窗口进行操作
public void clickReportIcon(){ String initialWindowHandle = driver.getWindowHandle(); //保存原始的浏览器窗口 p ...
- c# 定时关闭 MessageBox 或弹出的模态窗口
我们都知道,MessageBox弹出的窗口是模式窗口,模式窗口会自动阻塞父线程的.所以如果有以下代码: MessageBox.Show("内容',"标题"); 则只有关闭 ...
- PyQt（Python+Qt）学习随笔：在一个窗口点击按钮弹出另一个窗口的实现方法及注意事项
在Qt Designer中定义了两个窗口,一个主窗口一个弹出窗口,需要实现在主窗口点击一个按钮时弹出弹出窗口. 经老猿验证: 1.弹窗的窗口类型无特殊要求,只要是QWidget等窗口部件就可以,也可以 ...
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...
随机推荐
- 冰淇淋三明治 (Android 4.0)介绍
原文:http://android.eoe.cn/topic/summary 冰淇淋三明治 (Android 4.0) 是 Android 在设计上的一个里程碑.它将 Honeycomb 提供给平板的 ...
- [nginx]location语法
location语法 location语法格式 location [=|~|~*|^~] uri { .... } location [=|~|~*|^~] uri {....} 指令 匹配标识 匹配 ...
- Python | 一行命令生成动态二维码
当我看到别人的二维码都做的这么炫酷的时候,我心动了! 我也想要一个能够吸引眼球的二维码,今天就带大家一起用 Python 来做一个炫酷的二维码! 首先要安装工具 myqr: pip install m ...
- Android xUtils3源代码解析之网络模块
本文已授权微信公众号<非著名程序猿>原创首发,转载请务必注明出处. xUtils3源代码解析系列 一. Android xUtils3源代码解析之网络模块 二. Android xUtil ...
- raise EnvironmentError("%s not found" % (mysql_config.path,)) EnvironmentError: mysql_config not found 解决办法
报错信息如下: Downloading https://pypi.tuna.tsinghua.edu.cn/packages/a5/e9/51b544da85a36a68debe7a7091f068d ...
- android adb 读写模式 挂载文件系统
http://www.qylk.blog.163.com/blog/static/1346873562013092154430/ http://blog.sina.com.cn/s/blog_9906 ...
- 域控制器修改IP操作步骤
域控制器更改IP 在DC运维时,可能会碰上需要调整域控制器IP的情况,下面的操作就是在Windows Server 2008环境下域控制器更改IP的完整操作步骤. 1. 使用管理员帐号登录域控制器,依 ...
- IOS 禁止侧滑返回上个页面功能
1.首先把顶部左侧返回按钮隐藏掉 //隐藏返回按钮 self.navigationItem.hidesBackButton = YES; 2.1.再禁止页面左侧侧 //禁止页面左侧滑动返回,注意,如果 ...
- Android开发之获取手机SIM卡信息
TelephonyManager是一个管理手机通话状态.电话网络信息的服务类.该类提供了大量的getXxx(),方法获取电话网络的相关信息. TelephonyManager类概述: 可用于訪问有关设 ...
- Mapreduce 进阶
场景描述 订单需要封装成为一个bean 传入reduce,然后实现排序取出top1,或者分组求和 首先要实现排序就要实现comparable接口 要实现分组top1,那么"相同的bean&q ...