Question

我想在使用“popup”类时将body overflow设置为hidden。并通过JavaScript调用此类。作为我的CSS它不起作用。
我可以在我的班级中嵌入“body”标签吗？

#CSS
.popup {
    display: table;
    height: 100% !important;
    table-layout: fixed;
    width: 100%;
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: 400;
    body {
        overflow: hidden!important;
    }
}

我的例子是当你点击Facebook照片时，它会显示为全屏和锁定滚动。谢谢大家的帮助

我称之为。

<a href="#" onclick="getphoto(int)">Click to view larger</a>

的JavaScript

function getphoto(inputString) {
        $('body').css('overflow', 'hidden');
        if(inputString.length == 0||false) {
             $('#suggestions3').fadeOut(); // Hide the suggestions box
        }else{
     //alert(inputString);
        $.post("p/photo.php", {queryString: ""+inputString+""}, function(data) { // Do an AJAX call
        $('#suggestions3').fadeIn(); // Show the suggestions box
        $('#suggestions3').html(data); // Fill the suggestions box
    });
}
}

inputString是照片ID。在photo.php中，它返回html内容<div class="popup">...my content...</div>

Answer 1

我可以将“body”标签嵌套在我的班级吗？没有。

调用popup类时，请以这种方式使用jQuery .css()：

$("body").css("overflow", "hidden");

更多信息：http://api.jquery.com/css/

Answer 2

你不能那样使用CSS。但是，你可以在你的css中有一个名为overflow-hidden的类，就像这样：

.overflow-hidden{
    overflow:hidden !important;
}

然后在jQuery中：

$('.popup').click(function(){
    $('body').addClass('overflow-hidden');
});

您也可以使用

toggleClass()

和

removeClass()

所以你可以addClass()当你想要在弹出窗口消失后给它css类然后removeClass()。

Answer 3

不，你不能像那样使用CSS

if($('.popup').is(':visible')){

 $("body").css('overflow', 'hidden');

}

或

$('.popup').click(function(){
  $("body").css('overflow', 'hidden');
});

关闭弹出窗口或其他情况

 $("body").css('overflow', 'yourchoice');

Answer 4

您可以像这样使用jQuery：

$('body').filter(function(){
  return $(this).find('.popup').is(':visible')
}).css('overflow','hidden');

您不能像示例中那样使用嵌套的CSS。

Answer 5

您可以在jquery中使用addClass和removeClass

.bodyOverflow() { 
   overflow:hidden;
}

在jquery中

$('.popup').on('click', function(){
   $('body').addClass('bodyOverflow');
});

Answer 6

这样的东西？

DEMO http://jsfiddle.net/pwzaT/

JQUERY

$('button#show').on('click', function(){
    $('.popup').fadeIn(300);
    $('body').css('overflow','hidden');
});
$('button#hide').on('click', function(){
    $('.popup').fadeOut(300);
    $('body').css('overflow','auto');
});

当一些类调用时，我如何设置隐藏的身体溢出

6 个答案:

JQUERY