CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
mpdc
mpdc

Reputation: 3560

Loading a modal after closing a first (Bootstrap 3)

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.

Upvotes: 0

Views: 95

Answers (4)

mpdc
mpdc

Reputation: 3560

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

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

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/

Upvotes: 1

Akash Thakkar
Akash Thakkar

Reputation: 83

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');

Upvotes: 0

JMF
JMF

Reputation: 1113

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/

Upvotes: 0

Related Questions