Tabbed Bootstrap Modal Plugin With jQuery - Tab Modal

File Size: 35.9 KB
Views Total: 11072
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  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.


5. Options and defaults.

  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:


  • 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.