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?

回答1:

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