jquery - 在我的案例中如何使元素适合屏幕

Question

我有一个复杂的问题需要你们的帮助。

我有一张非常大的图片，上面有几个图片映射链接。

当我单击图像链接时，我想显示一个带有图像和内容的新 div，并从一个非常小的元素转换为适合浏览器屏幕(覆盖原始页面)。我已经创建了我的代码和文件，但不确定如何执行适合屏幕的功能。谁能帮我解决这个问题？非常感谢。

http://jsfiddle.net/kB27M/5/

请点击我的 jsfiddle 图像中的“overside load”标志。然后你会看到一个图像弹出并调整大小。我需要确保它调整到我的浏览器窗口的 100%。谢谢!

Answer 1

我冒昧地删除了一些代码并添加了其他代码，要获取窗口大小，您可以在 window 对象上使用 jquery 方法 width()，与 height() 相同；

$(window).width();
$(window).height();

放在一起，你想要的新 div 需要像这样设置窗口大小:

$(contentDiv).width($(window).width());
$(contentDiv).height($(window).height());

现在你想把它覆盖在窗口上，你可以通过将它的 position 设置为 fixed 来使用 css 技巧轻松实现它，这样鼠标滚动就不会影响它:

$(contentDiv).css("position","fixed");
$(contentDiv).css({top:0, left:0});

检查一下

FIDDLE