Tabbed Bootstrap Modal Plugin With jQuery - Tab Modal

Tab Modal is a jQuery & jQuery UI widget that lets you embed tabbed content into a Bootstrap modal window.

How to use it:

1. Load the necessary jQuery, jQuery UI and Bootstrap in the html document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/throbber.js"></script>

2. Download and load the Bootstrap Tab Modal plugin' JS & CSS files in the document.

<link rel="stylesheet" href="/path/to/bootstrap-tab-modal.css">
<script src="/path/to/jbootstrap-tab-modal.js"></script>

3. Initialize the plugin add your own tabbed content to the Bootstrap modal.

$('#demo').tabModal({
  header: 'Tabbed Modal',
  tabs: {
    first: {
      label: 'Default Tab',
      active: true,
      showTab: function() {
        $('#demo').tabModal('setTabContent', 'first', '<h3>Default</h3>');
      }
    }, second: {
      label: 'Second Tab',
      showTab: function() {
        // this tab does nothing
      }
    }, third: {
      label: 'Third Tab',
      showTab: function() {
        $('#demo').tabModal('setTabContent', 'third', '<h3>Third!</h3>');
      }
    }, fourth: {
      label: 'Fourth Tab',
      showTab: function() {
        $('#demo').tabModal('setTabContent', 'fourth', '<h3>Fourth!</h3>');
      }
    },
  }
});

4. The JavaScript to show the tabbed modal on the screen.

$('#demo').tabModal('show');

5. Options and defaults.

$('#demo').tabModal({
  dismissable: true,
  default_tab_content: 'use-throbber',
  header: '<h3>header html</h3>', // string or function ( 'this' is set to the widget's anchor element )
  tabs: {}
});

Change log:

2016-09-02

• Fixed bug where tabs would not work when they had no showTab function

---

This awesome jQuery plugin is developed by seanhuber. For more Advanced Usages, please check the demo page or visit the official website.