I was able to set the body overflow to hidden as soon as a specific class was

I am trying to set the body overflow property to hidden when the "popup" class is used and called by JavaScript. However, my CSS implementation does not seem to be working.

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

My scenario involves clicking on Facebook photos, where they appear fullscreen and lock scrolling. Any help on this matter would be greatly appreciated.

This is how I call it:

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

The inputString represents the photo ID. In photo.php, it returns HTML content 

<div class="popup">...my content...</div>

javascriptjqueryhtmlcss

Answer №1

Is it possible to nest the "body" tag within my class? Unfortunately, no.

When activating the popup class, utilize jQuery's .css() method in this manner:

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

For further information: http://api.jquery.com/css/

Answer №2

Instead of applying CSS directly, create a class named overflow-hidden in your stylesheet with the following code:

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

Next, use jQuery to add this class when a certain event occurs:

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

You can also utilize toggleClass() and removeClass() methods to dynamically add and remove the class as needed.

Answer №3

Sorry, but using CSS in that way is not recommended.

if($('.modal').is(':visible')){
 $("html").css('overflow', 'hidden');
}

Alternatively,

$('.modal').click(function(){
  $("html").css('overflow', 'hidden');
});

Remember to reset the overflow on modal close or as needed.

$("html").css('overflow', 'auto');

Answer №4

To implement jQuery functionality, try the following code snippet:

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

It's not possible to apply nested css in the way you demonstrated.

Answer №5

To implement hiding overflow in your website using jQuery, you can utilize the methods addClass and removeClass.

.hideOverflow() { 
   overflow:hidden;
}

Here is an example of how you can use these methods in jQuery:

$('.overlay').on('click', function(){
   $('body').addClass('hideOverflow');
});

Answer №6

Is this the solution you are looking for?

EXAMPLE http://jsfiddle.net/abcd123/

JAVASCRIPT

$('button#display').on('click', function(){
    $('.modal').fadeIn(400);
    $('body').css('overflow','hidden');
});
$('button#close').on('click', function(){
    $('.modal').fadeOut(400);
    $('body').css('overflow','auto');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the concealed mat-option once all other options have been filtered out

My current task involves dynamically creating multiple <mat-select> elements based on the number of "tag types" retrieved from the backend. These <mat-select> elements are then filled with tag data. Users have the ability to add new "tag types, ...

htmlangulartypescriptangular-materialngrx

AngularJS offers a convenient way for developers to fetch subcategories based on categories

Here is the JSON data provided for reference. JSON Data { "1":{"id":"1","name":"Websites IT & Software","sub_cat":[ {"id":"1","name":"Build a Website","description":"Build a Website"}, {"id":"2","name":"Build an Online Store","description":"B ...

javascriptarraysangularjsjsonajax

Can someone show me the method to retrieve the book title based on a particular ID using linqjs?

I am working with a JavaScript array that contains objects including an id and book title. My goal is to search this array and retrieve the title based on a given id, preferably using linqjs. For example: "213-46-8915" : id "The Busy Executive's ...

javascriptjqueryjslinq

Is the MVC pattern adhered to by ExpressJS?

Currently, I am diving into the world of creating an MVC Website With ExpressJS using resources from I'm curious to know if ExpressJS strictly adheres to the MVC pattern, or if it follows a different approach like Flask which focuses more on the "C" ...

javascriptnode.jsexpress

What is the method for mocking a function that returns an HTTP response?

My current project involves working with ExpressJS and I'm facing a challenge in stubbing a function that returns an HTTP response within a router. Specifically, I need to mock a request to Amazon S3. app.get('/', (req, res, next) => { ...

javascriptnode.jsexpressamazon-s3sinon

Analyzing past UTC date times results in a peculiar shift in time zones

When I receive various times in UTC from a REST application, I encounter different results. Examples include 2999-01-30T23:00:00.000Z and 1699-12-30T23:00:00.000Z. To display these times on the front end, I use new Date(date) in JavaScript to convert the ...

javascripttypescriptdatetimeutc

The CSS styling does not seem to be affecting the text button's appearance

I am currently creating a website using Bootstrap 5, and I'm facing an issue with making the header image responsive on mobile devices. While it looks great on desktops, laptops, and tablets, on mobile screens, the text and button alignment is off. I& ...

htmlcssresponsive-designfrontendbootstrap-5

The data input in the AngularJS form has not been identified

When utilizing AngularJS, my form is set up to pass data to a controller upon submission and then send it to an API. Form: <form ng-submit="newCompany()"> <div class="form-group" ng-controller="CompaniesController"> ...

javascriptangularjsforms

What is the jQuery alternative for form.field_name?

When using a native form DOM element, I can access its field by referencing the input name: <form id="form"> <input type="text" name="input-name" /> </form> var form = document.getElementById("form"); form["input-name"] // or form.i ...

javascriptjqueryformsinput

Executing an SQL delete query with a button click using a JavaScript function in PHP

I have created a setup with three essential files - index.html, database.php, and function.js. In database.php, there is a form generated containing a delete button that triggers the deletion SQL query when clicked. The primary objective is to present a ta ...

javascriptphphtmlmysqlajax

Ways to tally selected checkboxes in Angular 7?

I'm struggling to count the checked checkboxes on my form that reads data from an array. I have tried a few methods, but nothing seems to work. Since this is new to me and I am not familiar with how it works, could someone please provide guidance? I a ...

htmlangulartypescript

Issues with rendering on the html5 canvas tag's 2d context are preventing it from functioning

I tried integrating the HTML5 canvas tag into my asp.net2010 project to create graph bars, but unfortunately it is not working. Below is the code snippet that I used on my .aspx page, yet it only displays an empty page. I have tested it on updated versions ...

c#asp.nethtml

jquery method for retrieving default value from dropdown list

When no option is selected from the dropdown list, I require the default value to be used for business logic purposes. ...

javascriptjqueryangularjsreactjs

How to solve issues with jQuery functionality in an ASP.NET MVC3 view?

I'm encountering an issue with my ASP.NET MVC3 page. I have a view that contains a form to create an item for a specific model. Here is the code snippet: @model testPro.Models.AddItemModel @{ ViewBag.Title = "New"; } <script src="@Url.Con ...

jqueryasp.net-mvc

Querying mongoose with $near or other fields

I'm trying to retrieve documents using a query $or on different fields along with a $near query that is causing issues. Schema locationSchema{ ... beacon: String, access_point: String, gps: [], ... } locationSchema.index({ gps: ...

javascriptnode.jsmongodbmongoose

Using PHP and Bootstrap to input data inside a modal

I am working on a page that has a form located here: https://jsfiddle.net/5tzg8kzm/9/ <body> <h1>&nbsp;</h1> <!-- Page Content --> <div class="container"> <!-- Trigger the modal with a button --> ...

phpjqueryhtmlforms

Encountering a "variable not found" error when trying to run the JavaScript code to manipulate the web element

Upon executing the command to change the value of a web element text, I encountered an error stating "Can't find variable: e." sel=webdriver.PhantomJS() sel.get=('http://stackoverflow.com/questions?pagesize=50&sort=newest') elements=sel ...

javascriptpythonseleniumselenium-webdriver

Unable to successfully upload Ajax files

I am facing an issue with uploading a file through ajax. The code below keeps showing the alert "error occurred" every time I try to upload the image. Even in IE, it shows a long-running script error but fails to upload the 19KB file. Any assistance would ...

javascriptjqueryajaxjspasyncfileupload

"Centering an Image in ASP.NET HyperLink Control: A Step-by-Step

Here is the setup for my control: <asp:HyperLink CssClass="link-image" ID="Link1" runat="server"/> Code-behind in C#: Link1.ImageUrl = "imagePath"; Resulting HTML code: <a class="link-image" id="MainContent_Link1"> <img alt="" src=" ...

c#htmlcssasp.netwebforms

The states of both components are only being updated once the second event call is triggered within React

I am currently working with 2 functions in my project. One function is triggered when I type something into the search input, while the other one is called upon selecting a category. The initial values for the search and selectedCategories variables are an ...

javascriptreactjsreact-hooksreact-component