调用 JavaScript 动作时修改样式 - prettyPhoto 灯箱答案

【问题标题】：Modify style when JavaScript action is called - prettyPhoto lightbox调用 JavaScript 动作时修改样式 - prettyPhoto 灯箱
【发布时间】：2014-03-27 16:23:30
【问题描述】：

当调用下面的javascript动作（prettyPhoto lightbox）时，我需要修改body的样式以使overflow：hidden和position：fixed。

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']") .prettyPhoto({
    });
  });
</script>

所以，我需要插入类似的内容：

$('body').css('overflow','hidden');
$('body').css('position','fixed');

...但仅当灯箱打开时。

基本上，我需要在 prettyPhoto 处于活动状态时阻止身体滚动。有什么想法吗？

【问题讨论】：

标签： javascript jquery css scroll prettyphoto

【解决方案1】：

尝试在打开 prettyPhoto 的函数中添加一些基本的 JavaScript 代码。像这样：

document.getElementById(BodyId).setAttribute("class","body_noscrolling");

并为正文 (.body) 创建一个 css 值，以禁用滚动：

.body {
}  
.body_noscrolling {
overflow: hidden;
position: fixed;
}

同时更改<body>标签：

<body id="BodyId" class="body">

如果您的“prettyPhoto”中有 >CLOSE

document.getElementById(BodyId).setAttribute("class","body");

我不确定它是否会起作用，因为我不知道你的 prettyPhoto 函数是如何被调用的。

【讨论】：

首先，谢谢。我对javascript不太了解，所以很难导航。无论如何，完整的 jquery.prettyPhoto.js 可以在这里找到：github.com/scaron/prettyphoto/blob/master/js/… .... 我在哪里放置 document.getElementByID 行？
你可以尝试放置'document.getElementById(BodyId).setAttribute("class","body_noscrolling");'在第 118 行之后，以及 'document.getElementById(BodyId).setAttribute("class","body");'在第 470 行之后。同样，我不确定这是否有效，因为我自己无法尝试。
没用。很遗憾。不过谢谢！如果您还有其他想法，请告诉我。