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

How can I append a hash to a URL using JavaScript without causing the page to scroll?

Is it possible to add a hash to the URL without scrolling the page using JavaScript? I navigate to the page I scroll down I click on a link that adds a hash (for example: http://www.example.com/#test) The page should not scroll back to the top. What is ...

javascripturlhashscroll

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

javascriptphpjqueryhtmlcodeigniter

Managing arrayBuffer in hapi.js: A Comprehensive Guide

I am struggling to upload an arrayBuffer to my server and save it to a file. On the client side, I am using axios, and on the server side, I have implemented Hapi js. However, I am facing difficulties in extracting data from the request in the Hapi handler ...

javascriptnode.jshapi.js

Overriding a shared module service in Angular from a separate module: A step-by-step guide

I am working with various modules such as SchoolModule, UniversityModule, and SharedModule The SharedModule includes a BaseService that both the SchoolModule and UniversityModule providers are utilizing as an extension When loading the SchoolModule, I ne ...

javascriptangulartypescriptdependency-injection

Is it feasible to utilize a variable as a function within JavaScript programming?

I've been diving into the world of express.js and came across these statements. const express = require('express'); const app = express(); It's intriguing how we can call the variable "express" as a function by simply adding parenthese ...

javascriptnode.jsexpress

Attempt to prevent the loading of images using javascript

Is it possible to pause the downloading of images using JavaScript? I am seeking a way to extract all URLs from image tags and only initiate the image loading process when a user scrolls to a specific image. I am aware that the download can be halted using ...

javascripthttpbrowser

Getting a value from a Child component to a Parent component in Nuxt.js - a step-by-step guide

I am facing a challenge in passing data from Child A component to Parent, and then from the Parent to Child B using props. In my project using nuxt.js, I have the following structure: layouts/default.vue The default template loads multiple components wh ...

javascriptvue.jsfrontendnuxt.js

Is it possible for a React blog to be included in search engine results?

As I work on building my blog using React, Node.js, Express, Sequelize, and other technologies, a question has arisen in my mind: Will search engines index my articles, or will only the homepage of my site be noticed? For instance, if I have an article ti ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

The transition feature is not functioning properly in Firefox

I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...

htmlcsscss-transitionstransition

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...

ioscssbackground-color

The Elusive Solution: Why jQuery's .css() Method Fails

I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...

javascriptjquerycss

Tips for deactivating dates in the jquery datepicker that correspond to entries in a MySQL database

Is there a way to disable dates directly from a MySQL database in jQuery Datepicker? It seems tedious to constantly update dates in JavaScript, so I'm exploring the option of storing future disable dates in the MySQL database and displaying them in th ...

javascriptphpjquerymysqli

Utilizing the same uuid twice along with Vuex and the unique identifier generation tool uuidv4

Within my vuex store, there is a function to create a post. This function generates a json Object containing a unique uuid using uuidv4(). However, I have noticed that if I execute the function multiple times, the uuid remains the same each time (unless I ...

javascriptvue.jsvuejs2vuexuuid

Can someone help me figure out how to increase the values of two specific attributes within a class?

Currently facing a challenge with adjusting the number of likes and comments using increment for properties 'numberOfLikes' and 'comments'. Unsure whether to utilize a for loop or just the increment operator. Still new to coding, so apo ...

javascript

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

I am exploring the potential for allowing users to insert their own code into a Node application that is running an express server. Here's the scenario: A user clicks 'save' on a form and wants to perform custom business validations. This ...

javascriptnode.jstypescriptnode-vm2

Tips for choosing a specific set of list items using HTML

In my application, I have a list that is divided into sections like "currently viewing as," "recently viewed," and "staff." All elements in the list share the same classes, making it difficult to identify a specific list element in a particular section, su ...

javahtmlselenium-webdrivertestnghtml-lists

What is the functionality of named function expressions?

After coming across an intriguing example in the book labeled as a "named function expression," I was curious to delve into its mechanics. While the authors mentioned it's not commonly seen, I found it fascinating. The process of declaring the functi ...

javascriptnode.js

Changing <br> to a newline ( ) using JSOUP

Is there a way to efficiently replace all occurrences of <br> with a new line character (\n) in HTML using Jsoup? I'm looking for a clean solution that will result in the Element#text() outputting plain text without any HTML, but with &bsol ...

htmljsoup

Receive AJAX aid for PHP/MySQL dynamic dropdown menu implementation

My goal is to dynamically populate a second drop-down menu based on the selection made in the first drop-down. The first drop-down contains a list of tables from my database, and the second drop-down should display providers associated with the selected ta ...

javascriptphpjquerymysqlajax

Communication between Nodemailer and Mailgun

I keep encountering an authentication issue while trying to use Nodemailer with Mailgun. I followed the Nodemailer documentation which states compatibility with Mailgun SMTP, but unfortunately, I am consistently facing this error when executing my applicat ...

javascriptnode.jscoffeescriptmailgunnodemailer