Use modal in a modal after closing the second modal, the scrolling refers to the body

I am a new front end developer and I am having problem doing my project. I used modal in a modal and it works. My first modal is a long modal which needs to be scrolled to see the entire content.

<a data-toggle="modal" data-target="#modalmessage1"><button class="btn btn-gold tdc-width-100 tdc-mt-10" ><img class="img-button-icon" src="<?php echo base_url();?>img/email-white.png">SEND MESSAGE</button></a>

The problem is: When the second modal is closed. the scroll refers to the body. I can not scroll the first modal to see the whole content.

Question: How can I enable the scroll of the first modal after closing the second modal?

When dealing with bootstrap stacked modal, most common problems are

2nd modal overlay appearing behind first modal
on closing 2nd modal, scrolling disappear because modal-open removed from <body>

both problems can be solved with custom code as suggested by bootstrap

Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

$(document).ready(function () {
    $('secondmodalselector').on('show.bs.modal', function () {
        $('firstmodalselector').css('z-index', 1039); //this will push the first modal overlay behind second modal overlay
    });

    $('secondmodalselector').on('hidden.bs.modal', function () {
        $('firstmodalselector').css('z-index', 1041); //bring back the first modal overlay to it's normal state when 2nd modal closed
        $('body').addClass('modal-open'); // add `modal-open` class back to body when 2nd modal close so first modal will be scrollable
    });
});

来源：https://stackoverflow.com/questions/36353549/use-modal-in-a-modal-after-closing-the-second-modal-the-scrolling-refers-to-the

标签

twitter-bootstrap

bootstrap-modal