What is Reddit's approach to creating a login/signup modal?

Attempting to create a modal similar to the one on Reddit, I am puzzled about how they achieve the following:

  1. Scroll is disabled when the modal is open

  2. Scroll is enabled when the window is smaller than the modal

I have experimented with various CSS properties in Chrome dev tools, but none of them seem to affect scroll behavior. I also tried implementing a scroll disabling function, however, it ended up disabling all scrolling, even when the window is smaller than the modal.

Answer №1

When the modal is displayed, the <body> tag receives a class of modal-open, causing the page's scrollbars to be disabled.

The modal itself is positioned to fill the entire viewport and has its overflow set to auto, allowing scrollbars to appear only when the contents exceed the viewport size.

Below is a simple demonstration:

/* when modal is closed: */
#body {
  text-align: center; padding: 30px;
}
#body:not(.modal-open) {
  overflow: auto;
}
#body:not(.modal-open) #modal {
  display:none;
}

/* when modal is open: */
#body.modal-open {
  overflow: hidden;
}
#body.modal-open #modal {
  overflow: auto;
  padding: 10px;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}
#modal_inner {
  width: 100px;
  height: 200px;
  background: #fff;
  border: 1px solid #000;
  text-align: center;
  padding: 50px;
  margin: auto;
}
<html>
<body id="body">
  <div style="width: 200%; height: 300%">
    <button onclick="document.getElementById('body').classList.toggle('modal-open')">open modal</button>
  </div>
  <div id="modal">
    <div id="modal_inner">
      This is the modal!
      <button onclick="document.getElementById('body').classList.toggle('modal-open')">close modal</button>
    </div>
  </div>
</body>
</html>

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

React: Row with dynamic content not loading properly

I'm having trouble getting a response when I click to execute the addRow() function. Can anyone spot what might be wrong with my code? ... constructor(props) { super(props) this.state = { rowCount: 1 } } addRow = () => this.s ...

"Optimizing the Placement of jPlayer for Your Website

Struggling to properly position jPlayer on my webpage. After consulting jPlayer's documentation, I learned that it is supposed to be absolutely positioned by default. However, it seems to be flowing with the rest of the page content rather than being ...

Setting the mesh size to perfectly match the viewport height and screen dimensions in three.js - here's how!

Check out this Codesandbox demo for a canvas lighting experiment: https://codesandbox.io/s/canvas-lighting-experiment-wip-3p9im?file=/src/Canvas.component.jsx Although I've adjusted the canvas to fit the height and width of the window, the mesh withi ...

SVG with a background image that is centered

Looking to include a centralized image within an SVG. This image will act as a user avatar, but my attempts have been unsuccessful so far. .body { width: 100%; height: 100%; background: #1f1b33; padding: 2rem; } svg { width: 120px; } <div ...

The value for the specified date and time is not appearing on the

When using the Bootstrap DatetimePicker, I'm able to select a date and time. However, after clicking on a date, it does not prompt me for the time until I click on the clock icon. Another issue arises when attempting to display the stored date and ti ...

How to ensure an object is consistently rendered above all others using Three.js

Currently working on adding a dynamic command arrow that follows the cursor on the display. However, I have encountered an issue where it gets obscured by other elements on the screen. Is there a method to adjust the z-buffer or implement a workaround to ...

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how t ...

Unique Scrollbar Design for Chrome Extensions

While working on my website, I decided to incorporate a custom scroll bar using a script called fleXcroll. However, I noticed that when clicking inside the scrollable content, a large yellow border appears around the wrapper. This is puzzling because this ...

Do you have to change the style of each individual element using JavaScript, or is there another method to accomplish this?

Recently, I've been exploring different ways to use JavaScript to globally adjust styles. My goal is to modify the CSS rule that controls the element's style, similar to how you can do it using the Inspector in Webkit. However, after visiting htt ...

Transitioning to mobile-friendly web design

Just completed my very first page for a personal portfolio website. As a novice in web development, I made the width of my site 1600px to match the background image. Now, my goal is to make the page responsive. However, when I adjusted the width to 100%, ...

In JavaScript, escape is comparable to android decode

I used a JavaScript method to encode a string: var result = escape('Вася') The resultant string is: "%u0412%u0430%u0441%u044F" Now I need to decode this string in Java. How can I achieve this? The following attempt did not work: URLDecod ...

What could be the reason for the malfunction of my for loop within my JSON operation?

Hi everyone, I'm new to coding and currently working on a project involving Twitch Viewer on FreeCodeCamp. I've managed to extract information from the JSON file and display it in my HTML code. However, I'm encountering an issue where I am ...

Generating an Audio element on the fly using Javascript

I am looking to dynamically generate an audio tag within the <div class="audio-player" id="song"></div> section. I require: <audio id="audio-player" controls="controls" src="media/Blue Browne.mp3" type="audio/mpeg"> to be placed insid ...

There was an unforeseen conclusion to the JSON input while attempting to parse it

I am having an issue with the code in my get method. Can someone please help me troubleshoot and provide some guidance on how to solve it? app.get("/",function(req,res) { const url = "https://jsonplaceholder.typicode.com/users" ...

Arranging JavaScript array in alphabetical order

Just a quick question - does the .sort method in JavaScript automatically sort items in an array using ASCII order? I've been looking at examples, but have yet to find a definitive answer. Are there any alternative methods for alphabetically sorting a ...

What could be the reason for my reset function not halting?

Why does my reset button keep clearing the canvas and emptying the chat box even though the return statement is supposed to end the function? Main.js var reset = function() { context.clearRect(0,0, canvas[0].width, canvas[0].height); context.be ...

Ways to retrieve data from an AJAX success callback function

Within my front end JavaScript application, I need to execute an ajax request in order to retrieve data from the server. Once this data is acquired, I aim to display it within the view. var retrievedData; $.ajax({ url:"/getDataFromServer.json", ty ...

Looking to organize data based on duplicate values within an array using Javascript in the Vue framework

Can anyone provide assistance? Data = [{"name":A,"val":20}, {"name":B,"val":7}, {"name":C,"val":20}, {"name":D,"val":8}, {"name":E,"val":5}] SortedValue ...

How to Target a Specific Element Using its Class with jQuery

Hey there! I'm currently working with the following snippet of HTML code: <li class="grey"> <div class="row"> <button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button> </div ...

What is the best way to transfer data between controllers in my particular situation?

Currently, I am working on developing a factory for the restful services. The main challenge I'm facing is how to transfer data from one controller to another in AngularJS. Specifically, I need to use the data obtained from the first service call to ...