javascript - How i set body overflow hidden when some class called - Stack Overflow

admin管理员组

文章数量:1025244

I want to set body overflow to hidden when "popup" class was used. And called this class by JavaScript. As my CSS it don't work.
Can i have "body" tag nested in my class like this?

#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;
    }
}

My example is when you click on Facebook photos, it will appear to full screen and locked scrolling. Thanks all helps

I call it like this.

<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 is photo id. In photo.php it return html content <div class="popup">...my content...</div>

I want to set body overflow to hidden when "popup" class was used. And called this class by JavaScript. As my CSS it don't work.
Can i have "body" tag nested in my class like this?

#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;
    }
}

My example is when you click on Facebook photos, it will appear to full screen and locked scrolling. Thanks all helps

I call it like this.

<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 is photo id. In photo.php it return html content <div class="popup">...my content...</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 12, 2014 at 9:18 brendan asked Feb 12, 2014 at 9:00 brendanbrendan 1922 silver badges88 bronze badges 5

• "Can i have "body" tag nested in my class like this?" NO. – Rahul Desai Commented Feb 12, 2014 at 9:02
• When and How your popup class was used? – Felix Commented Feb 12, 2014 at 9:03
• Thanks everyone It worked when i add $('body').css('overflow', 'hidden'); to getphoto function – brendan Commented Feb 12, 2014 at 9:26
• Yes, it worked but scrolling is not visible. how to do it visible but locked it like Facebook photo viewer – brendan Commented Feb 13, 2014 at 10:32
• @brendan try $("body").css("overflow", "auto"); – Rahul Desai Commented Feb 13, 2014 at 11:46

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Can i have "body" tag nested in my class like this? No.

When popup class is called, use jQuery .css() this way:

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

More Info: http://api.jquery./css/

You can't use CSS like that. You can however have a class called overflow-hidden in your css which just sits like this:

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

Then in jQuery:

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

You can also use

toggleClass()

and

removeClass()

so you can addClass() when you want to give it the css class then removeClass() once the popup has gone.

No , you cant use css like that

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

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

}

or

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

On close of your popup or else condition

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

You can use jQuery like this:

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

---

You can't use nested css like in your example.

You can use addClass and removeClass in your jquery

.bodyOverflow() { 
   overflow:hidden;
}

And in jquery

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

Something like this?

DEMO http://jsfiddle/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');
});

I want to set body overflow to hidden when "popup" class was used. And called this class by JavaScript. As my CSS it don't work.
Can i have "body" tag nested in my class like this?

#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;
    }
}

My example is when you click on Facebook photos, it will appear to full screen and locked scrolling. Thanks all helps

I call it like this.

<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 is photo id. In photo.php it return html content <div class="popup">...my content...</div>

I want to set body overflow to hidden when "popup" class was used. And called this class by JavaScript. As my CSS it don't work.
Can i have "body" tag nested in my class like this?

#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;
    }
}

My example is when you click on Facebook photos, it will appear to full screen and locked scrolling. Thanks all helps

I call it like this.

<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 is photo id. In photo.php it return html content <div class="popup">...my content...</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 12, 2014 at 9:18 brendan asked Feb 12, 2014 at 9:00 brendanbrendan 1922 silver badges88 bronze badges 5

• "Can i have "body" tag nested in my class like this?" NO. – Rahul Desai Commented Feb 12, 2014 at 9:02
• When and How your popup class was used? – Felix Commented Feb 12, 2014 at 9:03
• Thanks everyone It worked when i add $('body').css('overflow', 'hidden'); to getphoto function – brendan Commented Feb 12, 2014 at 9:26
• Yes, it worked but scrolling is not visible. how to do it visible but locked it like Facebook photo viewer – brendan Commented Feb 13, 2014 at 10:32
• @brendan try $("body").css("overflow", "auto"); – Rahul Desai Commented Feb 13, 2014 at 11:46

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Can i have "body" tag nested in my class like this? No.

When popup class is called, use jQuery .css() this way:

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

More Info: http://api.jquery./css/

You can't use CSS like that. You can however have a class called overflow-hidden in your css which just sits like this:

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

Then in jQuery:

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

You can also use

toggleClass()

and

removeClass()

so you can addClass() when you want to give it the css class then removeClass() once the popup has gone.

No , you cant use css like that

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

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

}

or

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

On close of your popup or else condition

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

You can use jQuery like this:

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

---

You can't use nested css like in your example.

You can use addClass and removeClass in your jquery

.bodyOverflow() { 
   overflow:hidden;
}

And in jquery

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

Something like this?

DEMO http://jsfiddle/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');
});

本文标签： javascriptHow i set body overflow hidden when some class calledStack Overflow