【问题标题】: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;
    }
    

    同时更改&lt;body&gt;标签:

    <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 行之后。同样,我不确定这是否有效,因为我自己无法尝试。
    • 没用。很遗憾。不过谢谢!如果您还有其他想法,请告诉我。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-02-22
    • 2012-11-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多