javascript用DIV模拟弹出窗口_窗体滚动跟随

更新时间：2008年09月01日 14:39:09 作者：

可滚动跟随弹出框效果代码,非常实用的应用于网络广告

<!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" lang="zh-CN"> <head> <title>可滚动跟随弹出框效果代码——脚本之家</title> <script> function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; return {top:top,left:left,height:height,width:width}; } function showPop(){ var width = 300; //弹出框的宽度 var height = 160; //弹出框的高度 var obj = document.getElementById("pop"); obj.style.display = "block"; obj.style.position = "absolute"; obj.style.zindex = "999"; obj.style.width = width + "px"; obj.style.height = height + "px"; var Position = getPosition(); leftadd = (Position.width-width)/2; topadd = (Position.height-height)/2; obj.style.top = (Position.top + topadd) + "px"; obj.style.left = (Position.left + leftadd) + "px"; window.onscroll = function (){ var Position = getPosition(); obj.style.top = (Position.top + topadd) +"px"; obj.style.left = (Position.left + leftadd) +"px"; }; } function hidePop(){ document.getElementById("pop").style.display = "none"; } </script> </head> <body> 作者：丁学－－滚动跟随 <div id="pop" style="border:1px solid #CCC;display:none;">test <a href="javascript:hidePop();" href="javascript:hidePop();">hide</a></div> <a href="javascript:showPop()" href="javascript:showPop()">show</a> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

如何使用pdf.js展示pdf文件(亲测可用)
这篇文章主要介绍了如何使用pdf.js展示pdf文件(亲测可用),如果只是电脑端,可通过 iframe 标签嵌套预览,文中介绍了安装电脑ios的通用方法,感兴趣的朋友跟随小编一起看看吧
2023-10-10
JS+canvas画一个圆锥实例代码
本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例，有需要的朋友学习测试下吧。
2017-12-12
uniApp获取当前位置经纬度的示例代码
这篇文章主要介绍了uniApp获取当前位置经纬度,以下是使用uni.getLocation获取当前位置的示例代码,需要的朋友可以参考下
2024-01-01
js实现移动端编辑添加地址【模仿京东】
本篇文章主要介绍了js实现移动端编辑添加地址[模仿京东]的实例。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
一些老手都不一定知道的JavaScript技巧
这篇文章主要介绍了一些老手都不一定知道的JavaScript技巧,需要的朋友可以参考下
2014-05-05
js removeChild 方法深入理解
下面小编就为大家带来一篇js removeChild 方法深入理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
使用layui的router来进行传参的实现方法
今天小编就为大家分享一篇使用layui的router来进行传参的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS 图片压缩原理与实现方法详解
这篇文章主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下
2020-04-04
微信小程序自定义prompt组件步骤详解
本文分步骤给大家介绍了微信小程序自定义prompt组件,文中通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下
2018-06-06
js实现可折叠展开的手风琴菜单效果
这篇文章主要介绍了js实现可折叠展开的手风琴菜单效果,通过简单的样式变换控制菜单项的展开与折叠功能,非常简单实用,需要的朋友可以参考下
2015-09-09

javascript用DIV模拟弹出窗口_窗体滚动跟随

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具