Scrollbar Overlay

I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery.

If you want to take a look at the code, click here

One issue I am facing is that when I resize the window height so the right-hand scroll bar appears, the overlay starts disappearing into the top and bottom of the browser window, making it impossible to view its contents.

Is there a way to modify my code in such a way that when the height of the browser window is less than the height of the overlay div, scroll bars will appear to allow scrolling to the top and bottom of the overlay, while still keeping the background parent page from scrolling?

Any help on this would be greatly appreciated. Thank you!

Answer №1

Take a look at this solution: http://jsfiddle.net/LeZuse/nNdqX/. It's a simple example to help you get started. The concept behind it is that when you want to display a popup, you can disable scrolling on the body and show an overlay container with your custom popup content. Pay attention to the CSS rules body.overlay and body.overlay #overlay which allow you to easily show everything by using $("body").addClass("overlay");

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

Improved AJAX Dependency

A few days ago, a question was posted with messy code and other issues due to my lack of experience (please forgive the form handling as well). However, I have made some improvements and added context. The main problem now lies in the second AJAX call. Ch ...

javascript ajax html api google-chrome

The misaligned navigation bar and distortion on mobile devices are causing issues with the website's layout

The logo, search bar, cart, login, and sign up are not aligned on the same line. When I try to view it on mobile, distortion occurs. The search bar and other elements get messed up. In mobile view, nothing happens when clicking on the menu collapse butt ...

css twitter-bootstrap

verify whether the image source has been altered

There is an img tag displaying the user's avatar. When they click a button to edit the image and choose a new one, the src attribute of the img changes to the new image src. How can I detect when the src changes? Below is the code for the button tha ...

javascript jquery image src

Dynamically populate 7 select boxes with options using JQuery

I have a webpage that includes 14 different dropdown menus, one for each day of the week (Monday to Sunday). Each day has two dropdowns: one for opening time and one for closing time. I used jQuery to populate all 14 dropdowns with a pre-defined list of ho ...

javascript jquery html

Tips for automatically closing one sub menu while selecting another sub menu

I am working on a code snippet to manage the menu functionality. My goal is to ensure that when I click to open one submenu, any other currently open submenus should automatically close. ;(function($) { // Ensuring everything is loaded properly $ ...

javascript jquery

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

javascript css angular bootstrap-4 carousel

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

javascript html angular typescript

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...

jquery css transform css-transitions

Learn the steps to Toggle Javascript on window resize

Is there a way to toggle Javascript on and off when the window is resized? Currently, resizing the window causes the navigation bar to stick and remain visible above the content. <script> if ( $(window).width() <= 1200 ) { }else{ $('nav& ...

javascript jquery html css

Incorporate 3 additional compound filters with shuffle.js

Is there a way to add a third compound filter to the existing shuffle.js code provided below? // ES7 will have Array.prototype.includes. function arrayIncludes(array, value) { return array.indexOf(value) !== -1; } // Convert an array-like object to a r ...

javascript jquery html shuffle

Troubleshooting Problem with Helvetica Neue Font on Firefox

Recently, I decided to add the Helvetica Neue font to my system. However, upon doing so, I encountered a problem with Firefox browser where the font appeared double when using Helvetica Neue. Is there any available solution for this issue? Here is a scre ...

html css windows firefox

When making changes to my database using PHP and MYSQL, only the first column gets updated while the rest remain unchanged

I have a mysql database with the following columns: firstname, lastname, age, email, phone When I attempt to update the data, it sometimes turns out like this: John Doe 23 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2e2e2 ...

php mysql html

Creating a dynamic and flexible div using CSS

I am currently working on a small webpage and encountering an issue with responsiveness when scaling the browser window in and out. The design looks perfect at 320x568 resolution, but when I scale it down, a black box (`.transbox`) overlaps the image, whic ...

html css bootstrap-4

Looking for a way to trigger a function on JSTree's refresh event

I have searched through many posts here but cannot find what I am looking for. The version of JSTree that I am using is 3.3.3. My goal is to select a node after a create_node event triggers an AJAX request. Subsequently, JSTree fires the rename_node eve ...

javascript jquery json ajax

How can you attach a d3 graphic to a table that was created automatically?

Calling all experts in d3, I require urgent assistance!! On this web page, a JSON is fetched from the server containing 50 different arrays of numbers and related data such as 90th percentiles, averages, etc. A table is dynamically created with the basic ...

javascript jquery html json d3.js

What is the best way to create a 6-column grid system without using bootstrap?

I am looking to create a row with 2 columns that should turn into 2 separate rows, each containing one column when viewed on smaller devices. I have researched CSS Grid but find it quite complex. Can someone simplify it for me? Thank you! ...

css layout grid

Can a font size be adjusted dynamically based on the width of its containing class?

I have encountered this issue before, but the previous solution did not work for me. I am now seeking a viable alternative. Currently, I am developing a website and have an event announcement block that needs to display the event date spanning the entire ...

css sass

CSSer Q&A