Tips for enabling the background div to scroll while the modal is being displayed

When the shadow view modal pops up, I still want my background div to remain scrollable. Is there a way to achieve this?

.main-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
 }

I specifically require the overflow-y property to be set to auto in order to utilize the react-infinite-scroller framework.

This code snippet represents HTML and CSS for a modal:

<div class="modal-backdrop"></div>
<div class="modal"
  tabindex="-1"
  role="dialog"
  (click)="onClose()"
  >
</div>
.modal {
   overflow-x: hidden;
   overflow-y: auto;
}
javascripthtmlcss

Answer №1

Here is the solution you have been searching for

const openDialog = () => {
  document.getElementById('dialog-box').classList.add('show');
  const scrollYPosition = document.documentElement.style.getPropertyValue('--scroll-y-position');
  const pageBody = document.body;
};
const closeDialogBox = () => {
  const pageBody = document.body;
  const scrollYPosition = pageBody.style.top;
  pageBody.style.position = '';
  pageBody.style.top = '';
  window.scrollTo(0, parseInt(scrollYPosition || '0') * -1);
  document.getElementById('dialog-box').classList.remove('show');
};
window.addEventListener('scroll', () => {
  document.documentElement.style.setProperty('--scroll-y-position', `${window.scrollY}px`);
});
body {
  display: flex;
  font-size: 1.5em;
  justify-content: center;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
#content {
  max-width: 800px;
}
#dialog-box {
  display: none;
  position: fixed;
  top: 10vh;
  left: 10vw;
  width: 80vw;
  height: 80vw;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  z-index: 1;
  background-color: #444;
  color: #fff;
}
#dialog-box.show {
  align-items: center;
  display: flex;
  flex-direction: column;
}
#dialog-box span {
  margin-bottom: 1em;
}
#open-btn,
#close-btn {
  background: #da1b60;
  border: none;
  color: #fff;
  display: block;
  font-size: 1em;
  padding: 1em;
  width: 200px;
}
#open-btn:hover,
#close-btn:hover {
  background: #ff8a00;
  cursor: pointer;
}
#open-btn {
  position: fixed;
  top: 30px;
  left: 10px;
}
#close-btn {
  position: relative;
}
<button id='open-btn' onClick='openDialog()'>Open Dialog</button>
<div id='content'>
...Your Content goes here...
</div>
<div id='dialog-box'>
  <span>Wow, it's a modal! You can close it now.</span>
  <button id='close-btn' onClick='closeDialogBox()'>Close Dialog</button>
</div>

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

The node.js express framework is unable to fetch the URL and data from the node server

Attempting to create a basic application to retrieve data from a nodejs server. But encountering issues with accessing the file in both the browser and POSTMAN. Despite multiple attempts to verify the URLs, I have been unsuccessful. Below are the files i ...

javascriptnode.jsjsonmongodbexpress

Preventing Page Scroll While New Data is Loading

I am currently working on a React class component that uses Post components. Within this component, there is a button that triggers the loading of more data from the database. The issue I am encountering is that when new data is fetched, the page automatic ...

javascriptreactjsscrollcomponents

Due to a glitch in the firebase cloud function, the payment is not going through

I have developed a react-redux application with Firestore as the database and now I want to integrate Firebase Cloud Functions to handle Stripe payments. Here is how it's set up: Below is the action method for checkout, which processes token and amo ...

javascriptreactjsfirebase-realtime-databasegoogle-cloud-functionsstripe-payments

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it. Below is the code I currently have: <!DOCTYPE html> <html x ...

javascripthtmlcssbootstrap-5

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Currently, I am interested in utilizing a one-line textarea (with rows=1 and overflow-x:hidden;) similar to input type="text. However, I have encountered an issue where the content scrolls with "jumps" while typing inside it: https://i.stack.imgur.com/Rzf ...

javascripthtmlcsstextareaoverflow

javascript basic image carousel

How can I modify my slider so that "slide 1" appears after "slide 3" without needing to use the return or previous button each time? I'm not very well-versed in javascript, so I thought I'd reach out for some assistance ...

javascriptjqueryhtml

The app is having trouble loading in Node because it is unable to recognize jQuery

I am currently using Node to debug a JavaScript file that includes some JQuery. However, when I load the files, the $ sign is not recognized. I have installed JQuery locally using the command npm install jquery -save-dev. The result of "npm jquery -versio ...

javascriptjquerynode.jsdebuggingvisual-studio-code

The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

I am in need of assistance with coding (I am still learning, so please excuse any syntax errors). What I am trying to achieve is having two buttons (button A and button B) that can toggle the visibility of their respective divs (div A and div B), which sh ...

javascripthtmlcssshow-hide

Guide on retrieving an ArrayList() from intricate function in Angular

Simplicity is the key to my question. Let's take a look at this Angular method: getAllOrdersHeaders(){ this.getAllOrdersIds().subscribe(idList=>{ idList.forEach(id=>{ this.ordersCollection.doc(id).collection('metadata&apo ...

javascriptangulartypescript

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

javascriptjqueryhtmlcss

Incorporate Text, HTML, and Embed Images into PHPWord

I am currently utilizing PHPWord to create word documents using PHP. I have a specific content format that I need to adhere to, as shown below: Title Description Image1 Image1 Description(HTML CONTENT) Image2 Image2 Description(HTML CONTENT) As of now ...

phphtml

Convert the html list to a select dropdown with a hidden input type

In the process of revamping some code created by a fellow colleague, I have decided to modify his list into a more suitable select-option drop-down list. The PHP code provided by him looks like this: echo "<ul>"; echo "<li><a href='#& ...

javascriptphphtmlselecthidden-field

What causes the appearance of an HTTP header error and how can we identify the bug?

I tried to convert XML to JSON using two files which are included here. However, I keep encountering an error. Despite searching on SO for solutions, I haven't been able to find the answers. main.js /** SET ENGINE TO PUG */ app.set("views", ...

javascriptnode.jsexpresspug

Puppeteer patiently waits for the keyboard.type function to complete typing a lengthy text

Currently, I am utilizing puppeteer for extracting information from a particular website. There is only one straightforward issue with the code snippet below: await page.keyboard.type(data) await page.click(buttonSelector) The initial line involves typin ...

javascriptnode.jswebweb-scrapingpuppeteer

Using a variable to store the value of the id attribute in HTML code

How can I dynamically add an ID attribute to an HTML element using a variable declared in JavaScript? Using jQuery var table_row = $('table').find('tr#' + pid); var name = table_row.find('td:nth-child(1)').html(); table_ ...

javascripthtml

Jsonip.com is providing both internal and external IP addresses

I'm utilizing to retrieve the IP address of users. In some cases, it is returning both an internal and external IP as a string separated by commas. I am interested in only obtaining the external IP address. Can I assume a specific order for the retur ...

javascriptjson

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

connection.query( 'SELECT DeskName FROM desks WHERE stat = ?',["Booked"], function(err, rows){ if(err) { throw err; }else{ try{ var dataToParse = new Array(); dataToParse = rows; res.render('workspaces.html',{parsedArray : JS ...

javascriptjsonnode.js

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js

Determining where to implement the API display logic - on the server side or

Currently, I am in the process of restructuring an API that deals with user profiles stored in one table and profile images in another. The current setup involves querying the profiles table first and then looping through the images table to gather the ass ...

phpjavascriptmysqlapi