當某個班級召集時，我如何隱藏身體溢出

Question

我想在使用“彈出”類時將主體溢出設置為隱藏。 並通過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()

因此，您可以在要給它提供CSS類時添加addClass() ，然后在彈出窗口消失后再將其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

像這樣嗎

演示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');
});