May 3
2012

Bootstrap Tip About Using Tabs and Modals Together

Twitter Bootstrap , JavaScript , CSS , Miscellaneous , Web development , jQuery 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.

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

  1. Richard Herbert Says:
    May 3, 2012 at 8:42 AM 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:
    May 3, 2012 at 8:47 AM 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.

Leave a Reply