I'm using Turbolinks with Bootstrap 3 Modal component on rails4. If I refresh and open the page, the modal backdrop will be normal. However, the modal backdrop opacity keeps getting darker and darker as I open other pages, I assumes the opacity was not reset when Turbolinks loads in another page. I tried to find the backdrop element, but it looks like the opacity is generated on the fly by javascript. Have anyone seen the same problem? What's the fix?
Asked
Active
Viewed 1,653 times
2 Answers
0
Look at the html source. I bet, you don't hide the modal and the overlay is still shown. So, when there are more overlays open, it seems it gets darker.
santa
- 192
- 1
- 11
-
The same thing happens when I open up the website, click around multiple times, and then open up a modal for the first time, the backdrop will be too dark. I also did a jquery search for the modal backdrop, there is none. I think the backdrop is generated on the body tag using ".modal-open". Not a separate element. – randomor Sep 14 '13 at 19:30
-
Actually, I was wrong. I looked again and found there are a bunch of 'modal-backdrop' divs generated after the script tags. I could remove them manually, but that won't help when I open another modal. It will generate those again. Theoretically I could remove all the redundant backdrops by watching for `modal:shown` event, but I wonder if that's the root cause. – randomor Sep 14 '13 at 19:41
-
are you adding an event handler on page:shown? maybe you add it multiple times while changing pages, so the modal.show is called more than once? – santa Sep 14 '13 at 19:50
-
naa, that was not it.. i remember i had the same issue. maybe this helps - http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear – santa Sep 14 '13 at 20:15
-
Thanks for your help santa! I've found the problem. – randomor Sep 14 '13 at 23:17
0
Solved this with: Rails 4 Turbolinks make form submit multiple times
Looks like someone clever has moved the javascript into the body to save the page from blocked when loading too much js, while turbolinks will then load these js into the page every time a new page is rendered.
