How to style a modal window with a scrollbar using CSS

When my website loads, I am using reveal.js to display some terms and conditions. However, the text is quite lengthy and causes the main scrollbar of the website to extend.

What I would like to do is add a scrollbar to the modal window so that users can scroll through the content within the window without affecting the main scrollbar of the website.

Here is my code:

HTML:

<a href="#" class="big-link" data-reveal-id-terms="myModal-terms"></a>
<div id="myModal-terms" class="reveal-modal-terms xlarge"> Mytext </div>

Javascript:

$(document).ready(function() {

    $('#myModal-terms').reveal({
         animation: 'fadeAndPop',                   
         animationspeed: 300,                       
         closeonbackgroundclick: false,              
         dismissmodalclass: 'close-reveal-terms'    
     });
});

CSS:

.reveal-modal-terms {
        visibility: hidden;
        top: 30px; 
        left: 50%;
        margin-left: -300px;
        width: 485px;
        background: #FFFFFF url(modal-gloss.png) no-repeat -200px -80px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
        -box-shadow: 0 0 10px rgba(0,0,0,.4);
        }

If I include overflow: scroll; in the CSS, it does not seem to work as it still uses the main website's scrollbar...

Best regards,

cssmodal-dialogscrollbarreveal.js

Answer №1

To ensure that overflow functionality works correctly, it is important to enclose it within a div element that has specific width and height specifications.

Here's an example of how it can be done:

<div id="modal" >
    <div id="content" >
    </div>
</div>

In this setup, the 'modal' div determines the size (e.g., width: 700px, height: 600px) with overflow:auto property. If the content exceeds the specified height, the modal div will enable scrolling.

To apply this concept in your case, consider the following code snippet:

<div id="myModal-terms" class="reveal-modal-terms xlarge"> 
    <div>Mytext</div> 
</div>

Make sure to assign a fixed height to your 'myModal-terms' class and use overflow:scroll or auto for scrolling functionalities.

.reveal-modal-terms {
    visibility: hidden;
    top: 30px; 
    left: 50%;
    margin-left: -300px;
    width: 485px;
    height: 600px; // adjust as needed
    overflow: auto;
    background: #FFFFFF url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    box-shadow: 0 0 10px rgba(0,0,0,.4);
}

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

Including CSS in an HTML file does not function properly

I've been attempting to import a CSS file into an HTML document, but for some reason it's not working. I have also tried linking the path directly, but that hasn't worked either. <!DOCTYPE html> <html lang="en"> <head> < ...

htmlcssimportstyles

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

htmlcsswordpressbootstrap-4

Adjust the margin/padding of the Glyphicon within a Bootstrap badge

Currently, I have a glyphicon inside a badge and I want the glyphicon to have a smaller font size than the text. While I've achieved this, the issue now is that the glyphicon is not vertically centered within the badge. Whenever I attempt to add marg ...

htmlcsstwitter-bootstrap

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it: var body = document.querySelector('body'); var div = document.createElement('div'); div.style.borderRadius = '50%'; div.style.border = '1px s ...

javascripthtmlcss

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

cssangularbootstrap-4angular-materialbootstrap-5

jQuery UI Accordion - Adjusting Panel Height to Content Size

Currently, I am utilizing jQuery UI's Accordion feature from http://jqueryui.com/demos/accordion/, and my goal is to adjust it so that it resizes based on the contents of each panel rather than just fitting the largest one. In addition, I am seeking ...

javascripthtmlcssjquery-uiaccordion

Is it possible to transfer the style object from PaperProps to makeStyles in Material UI?

I am working with a Material UI Menu component and attempting to customize its border. Currently, I am only able to achieve this customization by using PaperProps inline on the Menu element. However, I already have a makeStyles object defined. Is there a ...

javascriptcssreactjsmaterial-ui

Dynamic binding of CSS properties in AngularJS is a powerful feature that enables

I am attempting to dynamically bind the css property counter-reset in AngularJS. To see my efforts, check out this Fiddle link. Essentially, I aim to have the numbering of li elements begin with the number specified in the controller. Despite trying to us ...

cssangularjs

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

htmlcsstwitter-bootstrap

Error message "mapStateToProps() in Connect(ModalRoot) must return an object literal. Received undefined." was thrown by the React-Redux container

I have been working on creating a Redux based Model/Dialog trigger inspired by Dan Abramov's solution to a similar problem on Stack Overflow. However, I encountered an error message saying "mapStateToProps() in Connect(ModalRoot) must return a plain ...

javascriptreactjsmodal-dialogreduxreact-redux

Making the navbar color modifications to the dropdown menu

I am currently working on applying color changes to the text in my navbar for the links that have been visited, are active, and are being hovered over. I have successfully implemented this for my regular hyperlink elements. However, I am facing an issue wi ...

htmlcssnavbar

What is the recommended way to handle passing props to child components in React - should all props be passed down, or only specific props

When it comes to passing props to child components, which approach is more efficient: Method 1. Utilize {...props} to pass all props, for example: ParentComponent = (props) => { return <ChildComponent {...props}> } Method 2. Explicitly pa ...

javascriptcssreactjsecmascript-6

Unlocking the Possibilities of scroll-snap-type

My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...

htmlcssscroll

Breaking the page with HTML and CSS

* { box-sizing: border-box; } .row { display: flex; } /* Creating two equal columns that sit side by side */ .column { flex: 50%; padding: 10px; } div.row { page-break-after: always; } <body> <div<div class="row"> ...

htmlcss

Ways to horizontally align 2 rows in React

I am in the process of developing a react app and I have encountered an issue with aligning the field names horizontally with their corresponding field values in multiple columns. Despite my efforts, the alignment still appears to be a bit off. Below is th ...

javascripthtmlcssreactjsalignment

Navigating through each segment

I'm currently working on a website with sections that are set to be 100% height of the window, but at least 800px tall. My goal is to implement a smooth scrolling functionality where one scroll moves the view from section to section. However, if the ...

javascriptjqueryhtmlcss

Formatting list items in HTML

I have just finished coding the following HTML code: My main goal is to align the list items - HOME | All About Kittens | Feeding Your Kitten in a proper layout. Currently, they are displayed as a simple list. However, I would like them to be aligned ...

htmlcss

Implementing CSS Media Print, tables elegantly transition to a fresh page

I am encountering a challenge when it comes to printing my dynamic table along with some preceding text. It seems that sometimes the table begins on a new page, resulting in the header test being isolated on the first page and only displaying the table on ...

htmlcssprinting

Setting the initial position for an SVG path

Working on a unique loading animation with 3 shapes that will scale as they follow a path. Each shape begins from a different starting point but follows a similar path. Shapes and paths were created in Illustrator and exported as SVGs. See below for an exa ...

csssvgcss-animations

CSS: the max-width property does not constrain an absolute positioned container from overflowing

I've been trying to figure this out for hours, but I can't seem to get it right. My top menu has submenus that include a popup menu. In one of my popups, I need the container to have a maximum width of 170 pixels and all the items inside to wra ...

htmlcss