尝试合并一个非常简单的灯箱。如何保持滚动的中心?
正在努力启动一个非常旧的网站,因为其他地方正在建设一个新网站,并希望合并一个超级简单的灯箱类型显示,但不确定如何使其工作。
这是目前的页面:
http://www.onboardtraining.co.uk/johnboyce
当点击右侧的 3 排汽车时,它会调用围绕此页面中的代码构建的 javascript 函数:
唯一的问题是深色背景层不完全展开到 100%,即使它在 CSS 代码中这么说,并且背景层和容器层都不会固定在屏幕上,如果访问者向下滚动一点然后单击缩略图,则层会显示在页面的更上方,并且仅部分显示覆盖屏幕,如果用户尝试滚动也是如此。
最后,虽然演示代码在 IE、FF 和 Chrome 中运行正常(除了上面的代码),但在 iPhone 上,灯箱似乎被推到了左边。
很抱歉有很多分支的大问题,目前只是学习 CSS 的方式并走出黑暗时代:)
谢谢,
Rik
编辑 - 我不想要使用任何外部 jquery 插件谢谢:)
Working on tarting up a very old site as a new site is being built elsewhere and wanting to incorperate a super simple lightbox type display but not sure how to make it work.
Here is the page as it stands:
http://www.onboardtraining.co.uk/johnboyce
When clicking on the 3 rows of cars on the right it calls a javascript function built around code from this page :
Only thing is the dark background layer doesnt fully expand out to 100% even though it says this inside the CSS code and both the background layer and container layer dont stay fixed on screen, if the visitor has scrolled down a bit then clicked the thumbnail the layers appear further up the page and only partially cover the screen, same if the user tries to scroll.
Lastly although the demo code works ok (bar the above) in IE, FF and Chrome, on the iPhone the lightbox appears shoved over to the left.
Sorry for the massive question with many branches, just learning my way around things CSS at the moment and coming out of the dark ages :)
Thanks,
Rik
Edit - I dont want to use any external jquery plug ins thanks :)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是最简单的方法:
position:fixed
支持除 IE6 之外的所有浏览器- 大多数网站不再支持该功能。_position:absolute
仅适用于 IE6,并阻止该浏览器中的分页。您应该保持白框不变(不要将其设置为
position:fixed
),因为它不会根据窗口的尺寸智能调整自身大小。不知道你的问题的 iPhone 部分。
首先,您应该更新您的文档类型:
这不好,因为它会导致怪癖模式。特别是在 Internet Explorer 中,许多功能在 Quirks 模式下根本无法工作或完全损坏。将您的文档类型更新为:
This is the easiest method:
position: fixed
is supported in every browser except IE6 - support for which is no longer relevant to most websites._position: absolute
is applied in only IE6, and stops the page breaking in that browser.You should leave the white box as it is (don't make it
position: fixed
), because it does not size itself intelligently to the dimensions of the window.No idea about the iPhone part of your question.
Firstly, you should update your doctype:
That is no good, because it causes Quirks Mode. In Internet Explorer especially, many things simply do not work or are otherwise entirely broken in Quirks Mode. Update your doctype to this:
使用此 jquery 灯箱插件:
http://leandrovieira.com/projects/jquery/lightbox/
Use this jquery lightbox plugin:
http://leandrovieira.com/projects/jquery/lightbox/