CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ms2015
ms2015

Reputation: 33

background scrolling bar when stacking bootstrap modal windwos

I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.

here is an example:

http://www.bootply.com/FGNRPwSRgH

Just look on the right side of the screen when closing the second window.

Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.

Upvotes: 3

Views: 98

Answers (2)

sbreiler
sbreiler

Reputation: 1

http://www.bootply.com/8K2wKO0c7I

$('body').append(
  $('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);

If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.

Upvotes: 2

Related Questions