jQuery 弹出窗口的形式一直是具体案件的中心
改成
position:fixed!important;/* FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
2.js方法又一次计算位置
$(function(){
$(window).scroll(function(){
//浏览器滚动栏失效;
//$(window).scrollTop(0); var offset = $(window).offset();
var position = $(window).position(); $("#div_pop").css("top",$(window).scrollTop()+$(window).outerHeight()/3);
//滚动栏移动的高度+浏览器高度(计算外框)的三分之中的一个
$("#div_back").css("height",
$(window).scrollTop()+$(window).outerHeight()); }) //背景层的大小高度,滚动栏移动的高度+浏览器高度(计算外框)
$(function(){
$(window).scroll(function(){
//浏览器滚动栏失效;
//$(window).scrollTop(0);
})
<script>
var firefox = navigator.userAgent.indexOf('Firefox') != -1;
function MouseWheel(e) {
///对img按下鼠标滚路,阻止视窗滚动
e = e || window.event;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
//其它代码
}
window.onload = function () {
var img = document.getElementById('img');
firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);
}
</script><div style="height:100px"></div>
<img src="http://avatar.profile.csdn.net/C/5/A/1_px372265205.jpg" id="img" style="width:200px"/>
<div style="height:1000px"></div>
可是这种方法用onkeypress 上下键 就会失效假设想完好能够加上对上下键的监控
<!DOCTYPE html>
<html>
<head>
<title>jQuery弹出框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.div_back{
display:none;
position:fixed;
z-index:9998;
top:0;
left:0;
width: 100%;
height: 100%;
background-color:#666666;
opacity:0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
.div_pop{
display:none;
position:fixed;
z-index:9999;
background-color:#eafcd5;
top:30%;
left:42%;
width:200px;
height:80px;
padding:2px;
border-radius:10px;
box-shadow: 0 0 10px #666; border:2px solid #666666;
}
.div_info{
position:absolute;
padding:10px;
}
.div_info_font{
position:absolute;
width:120px;
left:80px;
top:20px;
}
.div_title{
font-size:20px;
padding:2px;
background-color:#978987;
}
.div_close{
position:absolute;
right:5px;
}
.div_img{
height:40px;
width:40px;
left:20px;
position:absolute;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function fnClose(){
$("#div_back").hide();
$("#div_pop").hide();
}
function fnOpen(){
$("#div_back").show();
$("#div_pop").show();
}
</script>
</head>
<body>
<div id="div_back" class="div_back">
</div>
<div id="div_pop" class="div_pop" >
<div id="div_title" class="div_title">提示:
<a id="close" href="javascript:fnClose()" class="div_close">关闭</a>
</div>
<div id="div_info" class="div_info">
<img src="image/load.gif" class="div_img"/><div class="div_info_font">正在载入中...</div></div>
</div>
<p align="center">
<input type="button" value="打开" onClick="fnOpen()"/>
</p>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
</body>
</html>
版权声明:本文博客原创文章,博客,未经同意,不得转载。
jQuery 弹出窗口的形式一直是具体案件的中心的更多相关文章
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- jQuery弹出窗口浏览图片
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...
- Jquery弹出窗口
今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = functi ...
- JQuery弹出窗口小插件ColorBox
本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...
- FancyBox——jQuery弹出窗口插件
最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...
- jquery弹出窗口选择回写值
$(document).ready(function(){ $('.sel').dblclick(function(){ var nowid=$(this).attr('id'); window.op ...
- jquery-通过js编写弹出窗口
本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- EPUB弹出窗口式脚注
网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...
- jQuery弹出层始终垂直居中相对于屏幕或当前窗口
把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...
随机推荐
- Android网络:开发浏览器(二)——功能完善之长按网页图片菜单
上述的历史和书签的功能已经实现.不过如果我们长时间按住图片,并不会出现如同UC中的一系列选项,我们可以来看看UC中的长按图片出现的菜单. 图10.2.9 UC中的长按图片菜单 我们可以看到UC中 ...
- 前端project师,确定你的目标吧!无能的人才管他叫命运
导语: 你为自己定过一个不靠谱的目标,是20年前的事了吧. 长大你想干什么?你的回答是什么?现在实现了吗? 如今,你每天都坐在同一个格子间的同一个电脑前,会不会感到每天都像是在复印,感到前途是模糊的, ...
- 熟练掌握doc命令下的文件操作
这里以介绍操作php脚本为例
- W英语: 紧急, 非紧急
take your time 慢慢来 It is not urgent. Take it easy please. 不急,慢慢来.
- 基于visual Studio2013解决面试题之0510连续数之和
题目
- 华为OJ培训主题 比赛统计
题目例如以下: 比赛情况统计 有一个游戏平台,各个參赛队伍(以唯一的TeamID来标识)之间进行单循环的对抗赛,两个队伍之间仅仅举行一场比赛,比赛以得分的多少定胜负.须要完毕一个统计赛况的程序,可以随 ...
- Nginx设置alias实现虚拟目录 alias与root的用法区别
Nginx 貌似没有虚拟目录的说法,因为它本来就是完完全全根据目录来设计并工作的.如果非要给nginx安上一个虚拟目录的说法,那就只有alias标签比较"像",干脆来说说alias ...
- 积累的VC编程小技巧之工具条和状态条
1.工具条和状态条中控件的添加: 方法⑴.只能在ToolBar里创建控件:首先,在ToolBar中创建一个Button,其ID为ID_TOOL_COMBO(我们要将创建的控件放在该Button的位置上 ...
- C++ 对象的内存布局(上)
C++ 对象的内存布局(上) 陈皓 http://blog.csdn.net/haoel 点击这里查看下篇>>> 前言 07年12月,我写了一篇<C++虚函数表解析>的文 ...
- mojo 关闭utf8
[root@wx03 ~]# cat test.pl use Mojolicious::Lite; use JSON qw/encode_json decode_json/; use Encode; ...