Attempting to create a modal similar to the one on Reddit, I am puzzled about how they achieve the following:
Scroll is disabled when the modal is open
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.
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>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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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%, ...
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 ...
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 ...
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 ...
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" ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...