Bootstrap Tip About Using Tabs and Modals Together

CSS , JavaScript , jQuery , Miscellaneous , Twitter Bootstrap , Web development Add comments

I'm using Twitter Bootstrap on my current project at work, and I'm building a page that uses both the modal and tab JavaScript/jQuery plugins.  Both of those plugins working by employing a combination of specific HTML/CSS markup and JavaScript functions that interact with that markup.

I found out today that where you put the HTML for your modals could have an impact on how they function.  Originally, I had the HTML for the modal boxes related to the first tab on my page contained within the content <div> for that first tab, and the HTML for the modal box triggered by a link in the second tab within that tab's content <div>. The modals for the first tab worked fine, but when I triggered the modal for the second tab the page dimming effect occurred but the modal box wouldn't appear.

I did some experimenting and discovered that if I moved the HTML for all of the modals outside of the markup that made up the tab interface, all of the modals would then work correctly.

Given that the modals were triggered by id-based jQuery selectors, I have no idea why having the modal HTML inside of the tab content made a difference. I can only assume it has something to do with how the content related to each tab is affected by the tab plugin.

3 responses to “Bootstrap Tip About Using Tabs and Modals Together”

  1. Richard Herbert Says:
    I'm doing the same thing. I have a multi-tabbed page with modals fired from within different tabs and don't seem to have the same prob.

    I don't know what to suggest except, it works for me! :-)
  2. Azadi Saryev Says:
    iirc, it has to do with the content of your second tab being hidden on page load - tbs's styles/js do not get applied to hidden elements. or something to that extent :) you can re-init the modal window on tab activation, though.
  3. DivineChef Says:
    This was absolutely driving me nuts too, it happened before I'm glad you provided an explanation and a fix.

Leave a Reply