尝试合并一个非常简单的灯箱。如何保持滚动的中心?

发布于 2024-12-04 04:59:15 字数 842 浏览 2 评论 0原文

正在努力启动一个非常旧的网站,因为其他地方正在建设一个新网站,并希望合并一个超级简单的灯箱类型显示,但不确定如何使其工作。

这是目前的页面:

http://www.onboardtraining.co.uk/johnboyce

当点击右侧的 3 排汽车时,它会调用围绕此页面中的代码构建的 javascript 函数:

http:// www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

唯一的问题是深色背景层不完全展开到 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 :

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

如歌彻婉言 2024-12-11 04:59:15

这是最简单的方法:

.black_overlay {
    position: fixed;
    _position: absolute;
}

position:fixed支持除 IE6 之外的所有浏览器- 大多数网站不再支持该功能。 _position:absolute 仅适用于 IE6,并阻止该浏览器中的分页。

您应该保持白框不变(不要将其设置为position:fixed),因为它不会根据窗口的尺寸智能调整自身大小。

不知道你的问题的 iPhone 部分。


首先,您应该更新您的文档类型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

这不好,因为它会导致怪癖模式。特别是在 Internet Explorer 中,许多功能在 Quirks 模式下根本无法工作或完全损坏。将您的文档类型更新为:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This is the easiest method:

.black_overlay {
    position: fixed;
    _position: absolute;
}

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文