Navigating through a modal without affecting the main page's scroll position

My webpage has some content, and I also have a modal that pops up on top of it.

The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead.

Below is the CSS code:

html, body {
    background: blue;
    margin: 0px;
}

/* Content Behind */
.content {
    width: 100%;
    background: red;
    z-index: 100;
}

/* Modal Above */
#modal {
    background: yellow;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    transform: translateX(-50%);
    z-index: 200;
    overflow: scroll;
    display: none;
    padding: 5px;
}

.show {
    display: block !important;
}

View Fiddle

Thank you

htmlcssmodal-dialog

Answer №1

Take a look at this interactive example

You forgot to set the height for #modal. Update your CSS with the following changes:

#modal {
    background: yellow;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    height:100%;     /*<<<<<<<<<specify height>>>>>>>>*/
    transform: translateX(-50%);
    z-index: 200;
    overflow: scroll;
    display: none;
    padding: 5px;
}

UPDATE

To prevent the content behind the modal from scrolling when it is open, you need to make some adjustments in your JavaScript code.

Please refer to the updated example for the modified script.

The revised JS code is shown below:

var bodyElems = document.getElementsByTagName("body");
var body = bodyElems[0];
body.style.overflow = "hidden";

document.getElementById('openModal').onclick = function () {
    document.getElementById("modal").className = "show";
    body.style.overflow = "hidden";

};

document.getElementById('closeModal').onclick = function () {
    document.getElementById("modal").className = "";
    body.style.overflow = "auto";
};

Answer №2

You must specify a fixed height for the modal to display correctly.

Here is an example of how you can do it:

#modal {
    background: yellow;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    height: 400px; // Don't forget to set the desired height here
    transform: translateX(-50%);
    z-index: 200;
    overflow: scroll;
    display: none;
    padding: 5px;
}

Check out this working fiddle

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

What steps do I need to take to extract the date and month from a single datepicker using the code below?

<div class="col-md-3 pull-left" style="padding:9px"> <input type="text" id="datepicker" class="form-control"> </div> The HTML and C ...

javascriptc#htmlcssasp.net-core

Switch the CSS class when clicking on a responsive table within a table

I am looking to update the background color of a row within a table when a tr is clicked. Below is the code for the table: <div class="table-responsive"> <table class="table table-hover"> <thead> ...

cssvue.jsbootstrap-vue

Conceal and reveal feature for multiple dynamic identifiers simultaneously

After submitting the form, I am dynamically creating buttons. <template name="workflow"> {{#each newaction}} <div class="btn-box" > {{> actioncardsubcontent}} <button type="button" class="cancelsub" >New Action</button&g ...

javascriptjqueryhtmlmeteor

Using CSS to style the footer with a body height set to 100%

I am currently working on an angularJS web app with a basic template structure: <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="top"> <!-- Templates with vi ...

htmlcssangularjs

What is the deal with CSS relative magnification?

I am currently utilizing a PHP styleswitcher along with alternate stylesheets in an attempt to replicate the functionality of browser zoom (done using keyboard shortcuts cmd-plus or ctrl-plus). At the moment, when clicking on the "zoom in" graphic, it is ...

csszooming

AngularJS fails to prioritize the following element

Here is my HTML code: <div ng-app="app"> <form> <div class="form-group"> <label >Username</label> <input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/> ...

javascriptjqueryhtmlcssangularjs

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

javascripthtmlnode.js

Error message "Module not found in Vue" occurs when changing image URL to an online image

I am currently working on a dynamic image display feature where I retrieve image names as strings from a backend. To manage a large number of images, I plan to store them online while maintaining the same logic for displaying them. Previously, I achieved t ...

javascripthtmlvue.js

Having trouble getting jQuery .click to trigger on a dynamically loaded button?

I'm having some trouble with my code. I have a list that loads dynamically with a button inside, and although I have set up jQuery to handle the click event, nothing is happening. Here's a snippet of the code: HTML: <ul id="cart"> ...

javascriptjqueryhtml

Header and footer remain unaligned

Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...

htmlcssjsp

Maintain the HTML font color when printing - Issue with IE settings, not the printer

I've been struggling with this issue all day. Initially, I thought it was a problem with the print settings, but then I realized that it's actually the "Print background colors and images" option in IE causing the trouble. Here is the last test ...

htmlcssinternet-explorerprinting

Checking for the presence of text within a span tag - a simple guide

see fiddle if there is an already allotted time slot for the patient, change its color to yellow using jquery on the client side. In my example, if I assign a time slot for the first time, it turns green and when assigning another one, the previous slot tu ...

javascriptjqueryhtml

How can you ensure a line stays fixed to the bottom of a box regardless of the text size in SCSS and HTML?

I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is: .active-tab:after { content: ''; display: inline-block; height: 4px; width: 100px; right: -7px; background-color: ...

htmlcsssass

Arranging content in a horizontal row using div elements

My webpage features two div elements. One of the div represents header content, while the other div displays details content. I want both sets of content to be aligned side by side. Specifically, I need the details content to always appear on the right-han ...

htmlcss

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

phpjavascripthtmlcssiframe

Individual ".htaccess" and ".htpasswd" files are created for every webpage

I have a main page with links to 3 other pages (all within the same folder) named: content1.html, content2.html, and content3.html. <html> <body> <ul> <li><a href="content1.htm">content1</a></li> <li> ...

html.htaccess

What is the best way to extract the HTML input id using observeEvent in shiny?

How can I capture the HTML input id using observeEvent in shiny? shinyApp( ui = basicPage( HTML('<input type="button" name = "b1" value="Travel time"/>')), server = function(input, output, session) { o ...

htmlrshiny

Making the Select Tag function as an on-click event in JQuery

So I currently have a tab set up that functions as on click links when viewed on desktop. However, for tablet and mobile devices, I need it to be transformed into a select drop down list while maintaining the same functionality. Below is the code used for ...

javascriptjqueryhtmlevents

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter