Question

I have a modal and in that modal are tabs. The modal is initially hidden, and I have a list of buttons.

Each button is assigned to a tab in the modal. When I click a button, I want the modal to pop up, and then switch to the tab assigned to the button.

Answer 1

Unfortunately, there is no “out of the box” solution to this. It takes some jQuery/CSS manipulation.

Essentially, you need to:

1. Create onclick events on each of the buttons
2. Manipulate the CSS to add/show the targeted tab

For the Twitter Bootstrap codebase, you will need to add/remove classes from both the tab link list, and the tab-panes:

//remove active class from all links and buttons
$(".tab-pane").removeClass("active");
$(".tab-btn").removeClass("active");

//add active and fade in class to tab link and content pane
$("#home").addClass("active in");
$("#btn_home").addClass("active");

I recently added this to a project, so went ahead and wrote a little mockup.

http://coryprice.com/e/twitter-bootstrap/modal-with-tabs/