关闭第一个后加载模态（Bootstrap 3）

Question

I have a modal on the page ( .lockdown ) that has two close buttons. One of these ( .btn-typoedit ) simply closes the modal, however the other ( .btn-newcontact ) closes the modal and then immediately opens another ( #change-contact ). However, when this second modal closes, the whole page "shifts" slightly and I get space for a second scroll bar appear.

This is the Javascript code I am using:

$(document).ready(function() {
    $('.btn-newcontact').on('click', function() {
        $('#change-contact').modal('show');
    });
});

And a JSFddle to see the glitch in action (open the first modal, then click "NEW"): https://jsfiddle.net/z904fzcm/

Looking through the Bootstrap documentation, I can set an event to run on .hidden.bs.modal , but I'm not quite sure what's even causing the glitch.

Answer 1

Add overflow hidden to the body

   $(document).ready(function() {
    $('.btn-newcontact').on('click', function() {

    $('#change-contact').modal('show');
      $('body').css({'overflow':'hidden'});
    });
});

demo: https://jsfiddle.net/pf9juunm/

a safer solution will be to use a class to toggle the state:

$(document).ready(function() {
  $('.btn-newcontact').on('click', function(e) {
    $('#change-contact').addClass('active');
    $('.lockdown').modal('hide');
  });


  $('.lockdown').on('hidden.bs.modal', function() {
    if ($('#change-contact.active').length) $('#change-contact').modal('show');
    $('#change-contact').removeClass('active');
  });
});

https://jsfiddle.net/pf9juunm/1/

Answer 2

This might be a glitch from Bootstrap modal.

The workarounds can be removing the animation by removing the fade or set a timeout (~500ms) before calling .lockdown

You could also do this body { padding-right: 0 !important }

demo: https://jsfiddle.net/z904fzcm/1/

Answer 3

It adds a padding in the body that's why it is shifting slightly. Try to remove that padding with jQuery.

You can try removeAttr to remove style attribute from body.

$('body').removeAttr('style');

Answer 4

Watching the way the code changed as modals open/close, I managed to deduce the following:

• As a modal opens, the body receives the class .modal-open and receives the CSS padding-right: 17px .
• When a modal closes, the above class and CSS are removed.
• Because the code to close one modal and open another were within the same .on('click') declaration, the .modal-open class and CSS were removed but never re-added for the second modal.

In order to combat this I watch for a variable I named changeContact , set to 0 on page load, and then I change to 1 when the relevant button is clicked. If that variable is 1 when checking Bootstrap's useful hidden.bs.modal event, I then open the second modal. This separates the code to two separate functions, meaning the CSS is modified correctly.

$(document).ready(function()
{
    var changeContact = 0;

    $('.btn-lockdown').on('click', function() {
        changeContact = 0;
    });

    $('.btn-newcontact').on('click', function() {
        $('.lockdown').modal('hide');
        changeContact = 1;
    });

    $('.lockdown').on('hidden.bs.modal', function() {
        if (changeContact) {
            $('#change-contact').modal('show');
        }
    });
});

See it in action on JSFiddle