Nested Modals Result in Body Scrolling

https://jsfiddle.net/e6x4hq9h/

When opening the first modal, it works correctly and removes the background scrollbar.

However, when trying to open a modal from within that modal, it causes the scroll to jump to the background.

I have researched various solutions but none of them seem to solve this issue. I have tried everything mentioned on this page: Bootstrap modal: close current, open new as well as others.

Here is the Javascript code I have been using:

// Only one modal should be visible at a time
$('#myModal2').on('show.bs.modal', function (e) {
    $('#myModal').modal('hide');
})
.on('hide.bs.modal', function (e) {
    $('#myModal').modal('show');
});

Update: It is important for both the first and second modals to allow scrolling, which can be observed in this updated fiddle: https://jsfiddle.net/e6x4hq9h/21/

jquerycsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Expanding on Hardik's explanation, what is essentially happening is a predefined, inline styling for the .modal-open class applied to the body element. However, within the .modal-open class, there is also a nested styling for .modal-open .modal, where it specifies the overflow-y property of the modal to be "auto", making it scrollable. To achieve this effect, you need to include .css("overflow-y", "auto") in the modal that is being opened. Here is an example based on the provided fiddle:

$(document).ready(function () {

    // Only one modal should be displayed at a time.
    $('#myModal2').on('show.bs.modal', function (e) {
        $('#myModal').modal('hide');
        $('body').css("overflow","hidden");
        $(this).css("overflow-y", "auto");
    })
    .on('hide.bs.modal', function (e) {
        // @todo reload the job
        $('#myModal')
            .modal('show')
            .css("overflow-y", "auto");
    });

    $('#myModal').on('show.bs.modal', function (e) {
        // @todo reload the job
        $('body').css("overflow","hidden");
    })
    .on('hide.bs.modal', function (e) {
        // @todo reload the job
        $('body').css("overflow","visible");
    });
});

For the results, visit: https://jsfiddle.net/e6x4hq9h/22/

Answer №2

Here is exactly what you need.

https://www.example.com/code-example

Modifications made:

$('#myModal2').on('show.bs.modal', function (e) {
    $('#myModal').modal('hide');
$('body').css("overflow","hidden");
})
.on('hide.bs.modal', function (e) {
    // @todo refresh the task
    $('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
    // @todo refresh the task
$('body').css("overflow","hidden");
})
.on('hide.bs.modal', function (e) {
    // @todo refresh the task
$('body').css("overflow","visible");
});

Answer №3

Simply incorporate some flair

.modal { overflow-y: auto !important; }

Solves the problem with scrolling

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

The jQuery load() function is not functioning properly when trying to load content from an external HTTP source

I'm encountering an issue with a simple function that I've created: function loadContent(what){ //'what' = html filename $('#content').load("http://<domain_name>/" + what); } Usually, this function works perfectly f ...

jquery

Tips for creating a custom Angular Material modal window that is fully responsive to its parent modal window

Hey there! I've put together a custom modal window in Angular Material by combining the custom modal window example with the Angular Material slider demo. Everything is working well except for the fact that the sliders inside the modal window are not ...

javascriptcssangularjsangular-material

Using the jQuery .submit() function in conjunction with Angular

Is there a way to submit a form using an Angular controller? Also, how can we invoke jQuery functions within Angular? <form id="flightRules" target="_blank" action="<?= Yii::$app->request->baseUrl ?>/site/farerules" method="post"> ...

jqueryangularjs

Adjust Anchor ID for Media Query Activation

I need help with changing the ID of an anchor tag when a media query is triggered. Here is the code I am currently attempting, but it's not working: $(window).resize(function() { if ($('.container').css('width') == "100%"){ ...

jqueryhtmlmedia-queries

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

css

Is it possible to utilize attr() in order to set the background image? background-image:url(attr(src));

Is there a way to extract the src attribute value from an HTML file and store it in a variable in a css/scss file so I can easily use it in the url() property like this: <style> img[src]{ background-image:url(attr(src)); } ...

htmlcsssassattr

The positioning of the navbar is impacted by the float property of an element within a separate div

Currently, I am working on coding a basic website layout that includes a navigation bar positioned under the header. The issue I am facing is that the alignment of the navbar items depends directly on the length of the header element, but only when the hea ...

htmlcsscss-float

Clicking the load more button fails to retrieve any additional content

Recently, I implemented a "load more" button on my website's front page. The idea is for this button to load additional posts after every 15 posts. Despite having all the necessary code in place, clicking the button does not trigger any posts to load. ...

javascriptphpjqueryhtmlajax

Guide on implementing image tag and source in Django template language system

I need to include a base64 encoded image in JSON format into a Django HTML template. What is the best way to do this? <img src="R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp(Some 64 bit image);base64 /> How can I properly translate this code snippet into my ...

htmlcssjsondjangoencode

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

add before the beginning and after the end

Hi there, I'm trying to figure out how to add before my initial variable and after my last one. This is the code snippet: $pagerT.find('span.page-number:first').append($previousT); $pagerT.find('span.page-number:last').append($n ...

javascriptjquery

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Tips for generating an auto-incremented ID column in jQuery tables through the render method

My jQuery Datatable setup looks like this let purchasedProductTbl = $('#grdPurchasedProduct').DataTable({ filter: false, paging: false, lengthChange: false, searching: false, ordering ...

javascriptjquerydatatables

Creating a clickable background image for the entire page

While working on a friend's website, I came across an advertisement that covers the entire background of the site. The current background image is set using CSS: body { background-attachment:scroll; background-color:#000000; background-image:url("htt ...

jquerycss

JavaScript allows for the immediate termination of CSS animations

I am currently working on an input box that has a CSS animation applied to it. This animation creates a smooth fade-in effect when the page is loaded. Here is the CSS code: #search-box { /* ... */ animation: 2s fade-in } @keyframes fade-in { ...

javascripthtmlcsscss-animations

How can I eliminate the border from the last child in a row within a responsive framework?

Put simply, I am trying to target not only the last child in a parent div, but also the last item in a row that adjusts based on screen size. I have a row of 4 elements (divs) with borders on all but the last one using :last-child. However, when the screen ...

csstwitter-bootstrap-3

Animation controlled by a button

I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...

csswebkit

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

htmlcssangularangular-material

Tips for customizing the appearance of a chosen radio button

Here is my HTML code snippet: <div class="col-md-12 money-radio-container"> <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span> <input type="radio" name="optradio" class="money-radio" val ...

htmlcss