`
80x86
  • 浏览: 108272 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

javascript弹出层居中,js的Window size and scrolling

阅读更多
有一个文章的帮助很大:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow这个文章介绍取得当前浏览器长宽的办法,还有当前浏览器的scroll偏移的xy值,这样,我们就可以定位一个层在页面中间了

窗口长宽的代码
function getInnerXY() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}

scroller偏移的代码
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

下面是让层居中,注意,ie的行为不一致,导致要单独判断是否加上偏移:
function showDialog (did) {
??? G("blankiframe").style.display = "block";
??? G("bmask").style.display="block";
??? var el = G(did);
??? el.style.display = "block";

??? var innerxy = getInnerXY();
??? // add the offset
??? var offxy = getScrollXY();
??? if (js.util.browser.msie) { // ie
??? ??? el.style.top = ((innerxy[1]-el.clientHeight)/2 + offxy[1])+"px";
??? ??? el.style.left = ((innerxy[0]-el.clientWidth)/2 + offxy[0])+"px";
??? } else {
??? ??? el.style.top = ((innerxy[1]-el.clientHeight)/2)+"px";
??????? el.style.left = ((innerxy[0]-el.clientWidth)/2)+"px";
??? }
???
//??? el.style.marginTop = -(el.clientHeight/2) + "px";
//??? el.style.marginLeft = "-240px";
}

加上一下js.util.browser的代码:
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
js.util.browser = {
??? version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
??? safari: /webkit/.test(userAgent) && !/chrome/.test(userAgent),
??? chrome: /chrome/.test(userAgent),
??? opera: /opera/.test(userAgent),
??? msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
??? mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};
分享到:
评论

相关推荐

    js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框

    3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置...

    6种基于js Scrolling的滚动面板

    "6种基于js Scrolling的滚动面板"是一个主题,它涵盖了使用JavaScript实现的多种滚动效果,这些效果可以增强用户体验,使网页更加生动和吸引人。下面我们将深入探讨这六个滚动面板的知识点。 1. **纯JavaScript滚动...

    JS中frameset框架弹出层实例代码

    JS中frameset框架弹出层实例代码涉及了网页开发中的几个关键技术点:使用frameset框架来布局页面、在frameset框架中实现消息弹出层的交互逻辑、以及如何在子框架中通过JavaScript调用父框架的方法。下面详细介绍这些...

    Automatic Scrolling Textarea Using HTML JavaScript.zip

    在IT行业中,JavaScript是一种至关重要的编程语言,尤其在网页交互和动态效果方面有着广泛的应用。本项目"Automatic Scrolling Textarea Using HTML JavaScript.zip"显然关注的是如何利用HTML和JavaScript实现一个...

    右下角弹出窗口 javascript

    <script language="javascript" type="text/javascript"> window.onload=function(){showBox();setTimeout("closeBox()",10000)} function showBox(o){ if (o==undefined) o=document.getElementById("rbbox"); ...

    javascript自定义右键弹出菜单实现方法.docx

    ### JavaScript自定义右键弹出菜单实现方法 在Web开发中,为了提升用户体验与功能多样性,自定义右键菜单是一种常见的交互方式。本文将详细解析如何利用JavaScript来实现一个简单的自定义右键弹出菜单,并深入探讨...

    DIV+CSS弹出窗体(非常漂亮)

    根据提供的文件信息,本文将详细解释如何使用DIV+CSS实现一个美观且实用的弹出窗体,这种技术常用于创建类似QQ空间登录窗口的效果。本文将深入探讨代码中涉及的关键CSS样式、HTML结构以及简单的JavaScript交互逻辑。...

    js,bootstrap 城市弹出框

    在网页开发中,"js,bootstrap 城市弹出框"是一个常见且实用的功能,它结合了JavaScript(js)的动态交互与Bootstrap框架的优雅设计,为用户提供了一个方便选择城市的下拉弹出框。Bootstrap是一款流行的前端开发框架...

    10款javaScript图片展示

    10. 图片裁剪和旋转(Image Cropping and Rotation):JavaScript库如Cropper.js可以提供图片裁剪和旋转的功能,常见于用户上传头像或编辑图片的场景。 以上就是标题和描述中所提到的JavaScript图片展示相关的10个...

    JavaScript页面开发特效.rar

    5. **模态窗口(Modal Window)**:模态窗口是一种弹出式界面,它在当前页面之上显示额外的信息,而不会离开原来的页面。JavaScript可以控制模态窗口的打开、关闭以及与主页面的交互。 6. **滚动效果(Scrolling ...

    javascript权威指南(第六版)

    15.8 Document and Element Geometry and Scrolling 389 15.9 HTML Forms 396 15.10 Other Document Features 405 16. Scripting CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....

    javascript特效,值得收藏0

    8. **弹出框(Popup)**:如提示框、对话框,JavaScript可以控制其显示、关闭以及与主页面的交互。 9. **响应式布局(Responsive Design)**:随着设备尺寸的变化,JavaScript可以辅助CSS进行布局调整,确保在不同...

    js 把妹特效酷炫

    JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的开发。它能够让你的网页变得生动活泼,充满交互性。本教程将围绕“js 把妹特效酷炫”这一主题,探讨如何利用JavaScript来实现各种吸引眼球的...

    javascript特效全集

    本资源“javascript特效全集”集中了多种JavaScript特效的实现方法,旨在帮助开发者和设计师掌握各种JavaScript技巧,创建出引人入胜的交互式网页。 1. **基础特效** - **滑动(Slide)**:包括横幅滑动、图片轮播...

    javascript经典特效---文字反复显示.rar

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态效果。在网页设计中,JavaScript特效是提升用户体验的重要手段,其中“文字反复显示”的特效就是一个常见的实例。这个...

    在一个网页中间弹出窗口

    ### 在网页中间弹出窗口的知识点解析 #### 一、网页弹窗的实现方式与应用场景 在现代网页设计中,弹窗(模态对话框)是一种常见的交互元素,用于显示临时性的信息或提示用户进行某种操作。弹窗的实现不仅能够提升...

    iframe子页面操作父页面并实现屏蔽页面弹出层效果

    问题:在index.html 中,iframe 引入son.html,在son.html 中如何点击某个操作,实现屏蔽整个页面,并弹出要显示的层? 准备: index.html son.html 思路: 一:index.html中iframe引入son.html , 复制代码代码...

    javascript超炫的效果100个

    JavaScript是一种广泛应用于网页和网络应用的编程语言,它赋予了网页动态交互的能力,使得网页不再仅仅是静态的信息展示,而是能够实现各种炫酷的视觉效果。在这个"javascript超炫的效果100个"的资源包中,包含了...

    原生 javascript 弹层弹窗弹幕web应用解决方案xtiper-master.zip

    在JavaScript的世界里,弹层弹窗和弹幕是常见的网页交互元素,用于提示用户、展示信息或接收用户输入。"xtiper-master.zip"这个压缩包文件提供了一个原生JavaScript实现的弹层弹窗弹幕解决方案,它可以帮助开发者在...

Global site tag (gtag.js) - Google Analytics