an enhancement possibly - using scrollbar to scroll down when modal is bigger than screen about bootstrap-modal

[jschr]

Unfortunately I can't think of an easy way to fix this without a major overhaul. The problem is that the modal-container is responsible for scrolling every open modal and only exists once. The modal backdrop is created for each modal and needs to sit on top. The modal container and backdrop are both position fixed which causes the backdrop to cover the scroll bar. I need the backdrop on top of the container because it is also responsible for closing it's modal when clicked. What I think might be the solution is:

1. Create a modal container for each modal
2. z-index it so it is on top of the backdrop
3. Make the modal container have the click event to close it's modal

I think this may solve your problem as well as another one; since there is only one modal container, having one large modal will cause it to scroll even when smaller modals are stacked on top.

I will have to think about it some more because it would be a fairly big change but if you have any other ideas I'd be glad to hear them.

Thanks

[seanhotw]

I am also struggling to get scrolling works with multiple modals. I think having a modal container for each modal makes sense.

[jschr]

@seanhotw Can you elaborate on some of the difficulties you are having?

[seanhotw]

I am trying to make individual modal to have its own scrollable container, so that one layer will not affect the others.

What's happening now is every modal is under the same modal-container, if the first modal is overflowed but the second one is not, the second modal is still scrollable. Also, the backdrop is covering the modal-container completely, which means the modal can only be scrolled inside content area, it would be nice if the modal is scrollable anywhere on the page like what pinterest does to their modals.

Rather than do this

modal-container
-- modal
-- modal-backdrop
-- modal
-- modal-backdrop

I am hoping to make it work like this

modal-container
-- scrollable-container
---- modal
-- modal-backdrop
-- scrollable-container
---- modal
-- modal-backdrop

[jschr]

@seanhotw ya that's kind of what I'm thinking except I'm not sure if you would need a modal-container anymore as the scrollable-container would serve the same purpose I think. This would also eliminate the dependency on creating a modal-container as part of the setup which would be nice.

Thanks for the ideas, when I get some time I hope to start implementing this. Feel free to share any code if you have any!

[jschr]

This is now resolved in the current wip-2.0 branch.

[Yohn]

nice man!! glad you were able to figure something out for it :)
I converted all modals on my site to use your modal.js, and its working nice! I also added the ability to drag / move the modals with the tiny drags.js plugin

[jschr]

Sounds cool! The solution I came up with actually solved a couple issues I have with the current modals but unfortunately could be a breaking change hence why it's a major version release.

I'll push the new version soon, just finishing up some testing. If you're feeling adventurous I would be curious to see how well they perform in your environment :)

Regardless, thanks for posting the issue!