Modal

Modal is a great script for displaying special contents in popups, either by using static content or dynamic content with the help from the template system. Check the examples below and the additional notes for more information.

Options

• content - the modal script comes with a template system instead of a load remote content function (Bootstrap 4 drops it). This option is only for Javascript invocation.
• duration - if you are customizing the fade animation duration for Modal, you need to provide a duration via Javascript invoke function or data-duration="DURATION" attribute, an option to make sure everything is syncronized. This option is 300 by default, just like Bootstrap Modal fade duration.
• keyboard - option to dismiss the current modal via Esc key. This option is true by default.
• backdrop - option use / not the backdrop. This option is true by default.

Examples

Now let's have a look at some examples and write some more instructions.

Launch simple modal Launch modal from template Same modal, other template

The first example above is just about the exact same as the first example at Bootstrap demo page, everything is exactly the same. The next two examples use the Modal template system. Here's how to do:

<!-- first, you need to provide a basic modal structure -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>

The backdrop will be added automatically if not otherwise disabled. Ok now we need a trigger.

<!-- the modal can be triggered via a button with data-target="#myModal" attribute (example 2) -->
<button id="custom-modal-template" type="button" data-toggle="modal" class="btn btn-default btn-lg" data-target="#myModal">Launch modal from template</button>	
<!-- or a link with href="#myModal" attribute (example 3) -->
<a id="custom-modal-template" data-toggle="modal" class="btn btn-default btn-lg" href="#myModal">Launch modal from template</a>

Finally we need a proper handler function to use the template system and fill the <div class="modal-content"> element. The example below can be found in the ../assets/js/scripts.js file.

// we need a blank modal to fill up
var modalFrame = document.getElementById('myModal'); 
// we grab the button trigger by it's ID
var btnModal = document.getElementById('custom-modal-template'); 
btnModal.addEventListener('click', function() {
  //template content for modal example 2, should work for the third button as well
  var modal2 = new Modal(modalFrame, {
  content: 
  '<div class="modal-header">'
  +'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'
  +'<h4 class="modal-title" id="gridModalLabel">Modal title</h4>'
  +'</div>'
  +'<div class="modal-body">'
  +'<p>This is where you fill up content you know, etc.</p>'
  +'</div>'
  +'<div class="modal-footer">'
  +'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
  +'<button type="button" class="btn btn-primary">Save changes</button>'
  +'</div>'});
});

By changing the innerHTML of the modal-header, modal-body or modal-footer with variables, you can achieve exactly the same as the other examples from the demo of the original plugin.

Additional Note

Modal has no events attached, such as show.bs.modal or shown.bs.modal, but if devs would need them, you can have a look at the code of carousel, it implements the events just like the original plugin. Modal also has no method as described in the documentation of the original script, except the options.

Dropdown

Dropdown opens the dropdown-menu on click and closes it on click/blur after a 200ms timeout, to allow the click event on it's menu items, including external links. Dropdown doesn't cover the original methods or events, but will properly handle all events, especially blur, even for later added dropdown elements.

Above all, the script will also allow users to dismiss the dropdown by pressing the Esc button.

• Pill
  • Action
  • Another action
  • Something else here
  • External link
• Dropdown
  • Action
  • Another action
  • Something else here
  • External link

Scrollspy

ScrollSpy requires the element and all it's childNodes to have position: relative and fill the entire area, so it does not work on targeting headings. See the notes below the example. The script does not cover the original methods, events or option, can only be controlled via DATA API.

Options

• target - the only option for Scrollspy, is the target of the container with data-spy="scroll" attribute. Can be set as shown via DATA API or Javascript. See notes for the example below.

Example

The above example, is the exact same as for the original plugin. For this example we are having the scrollTarget as the element itself and above it the .nav component to target the Scrollspy object.

<!-- this is our element -->
<div data-spy="scroll" data-target="#navbar-example2" class="scrollspy-example">

<!-- this is our element's target, the nav component -->					
<ul id="navbar-example2" class="nav">

Generally for Scrollspy to work perfect, you would want to avoid incorrect behavior because the element's children don't fill their entire area, you may consider using:

.scrollspy-example > * { float: left; width: 100%; clear: both }

Also like the original plugin, the other example in this page is the side navigation on the right side that pins to top. This example uses the window as the internal scrollTarget, but you don't have to worry about that, it's just for you to know.

Tab

Tab works with any kind of navigation components in Bootstrap as you can see in the example below. The script only works via DATA API, and has no support for the original methods or events. Unlike the original plugin, the animation is smooth because it waits for the current active tab to fade away first before animating the next.

Options

• duration - the only option for Tab, is an internal 150ms duration setting to emulate transitionend. If you are using a different fade duration than the default plugin, this can be set via data-duration="DURATION" attribute.

• Home
• Profile
• Dropdown
  • Some tab
  • Other tab

Tooltip

This here is an example Tooltip only using data-toggle="tooltip". Unlike the original Bootstrap Tooltip, the native Javascript version here can do automatic placement, without any additional options required. Another key difference is that this script will never bubble, also worth mentioning it works perfect with IE8+ and is half the size of the original script.

Now let's test all the other placement positions, we start with the bottom placement, then left, and right.

Options

• animation - option to customize the Tooltip animation. If you are using a different animation other than fade, you can specify that via data-animation="ANIMATION" attribute. This will add an additional CSS class to the Tooltip to enable a custom transition. The default value is fade.
• placement - option to set a specific Tooltip placement to top, bottom, left or right, relative to it's target. The default value is top.
• duration - is an internal 150ms duration setting to emulate transitionend. If you are using a different duration than the default plugin, this can be set via data-duration="DURATION" attribute. The default value is 150.
• delay - is an internal 100ms delay before generating the tooltip, helpful for legacy browsers to be able to compute the automatic positioning. Can be set via data-delay="DELAY" attribute. The default value is 100.

Examples

Let's put it to the test! Some heavy testing on the automatic repositioning with very very long tooltips.

Left Top Bottom Right Left Top Bottom Right

Additional Note

You can also enable Tooltip for elements not having the specific DATA API, but have a title="Not null title" attribute. You can do the following:

// find all elements with title attribute
var elementsTooltip = document.querySelectorAll('[title]');

// attach a tooltip for each
for (var i = 0; i < elementsTooltip.length; i++){
  new Tooltip(elementsTooltip[i], {
    placement: 'top', //string
    animation: 'slideNfade', // CSS class
    duration: 200, // integer
    delay: 150, // integer
  })
}

Tooltip always uses the document.body as the containe and doesn't cover template system like the original, and remember that it can do automatic placement without any additional options.

Popover

This here is an example Popover using data-toggle="popover". Unlike the original Bootstrap Popover, this script does not require the Tooltip script and works just about the same as the above except that Popover has, like the original script, the ability to work with templates and trigger options: hover (default), click and focus.

Without further talking, let's test all the options, and placement positions, we start with the bottom placement, then left, and right.

Options

• template - via Javascript, you can dynamically create popovers via the template system. See examples below.
• content - the data-content="CONTENT" attribute to fill the Popover. If the template is not specified via Javascript or the content option is not set, the Popover will not initiate.
• title - the data-title="TITLE" attribute to fill the Popover title.
• trigger - option to change the Popover trigger event: hover, focus and click. In some cases you may want to open Popover on focus for form elements or click for other buttons, you can specify that via data-trigger="EVENT" attribute. The default value is hover.
• animation - option to customize the Popover animation. If you are using a different animation other than fade, you can specify that via data-animation="ANIMATION" attribute. This will add an additional CSS class to the Popover to enable a custom transition. The default value is fade.
• dismiss - option to make the Popover dismissible. When used, it will also add an X button at the top-right of the popover. You can enable this option via data-dismiss="true" attribute. The default value is false.
• placement - option to set a specific Popover placement to top, bottom, left or right, relative to it's target. The default value is top.
• duration - is an internal 150ms duration setting to emulate transitionend. If you are using a different duration than the default plugin, this can be set via data-duration="DURATION" attribute. The default value is 150.
• delay - is an internal 100ms delay before generating the Popover, helpful for legacy browsers to be able to compute the automatic positioning. Can be set via data-delay="DELAY" attribute. The default value is 100.

Examples

Now we are going to test buttons and Popover with large contents. The last two examples below are using the template system and different trigger options. The Popover generated for the last two examples can be dismissed on window resize or blur (focus out).

Left Top Bottom Right Dismissible Click to open

Additional Note

To use the template system, you can attach a custom handler to a target as the following:

//define some variables or get their values from other scripts
var someTitleFromOtherCode = 'Sample title';
var someContentFromOuterSpace = '<p>Some sample message.</p>';

//initiate Popover with the template
var popover2 = new Popover('.popover-via-template', { // where .popover-via-template is the text input
  trigger: 'focus',
  template: '<div class="popover" role="tooltip">'
  + '<div class="arrow"></div>'
  + '<h3 class="popover-title">'+someTitleFromOtherCode+'</h3>'
  + '<div class="popover-content">'+someContentFromOuterSpace+'</div>'
  + '</div>'
});	

The above code can be found in the ../assets/js/scripts.js file.

Remember - Popover always uses the document.body as the container, and does automatic placement without options.

Alert

Alert does not have any events and methods, it's action simply dismisses the Alert component. This script can successfully handle later added alerts into the DOM. See Button first example below.

Alert also uses a 150ms internal duration to emulate transitionend. No option required or needed really.

Button

Button script allows you to change the text of a given button. If using a data-loading-text="Loading.." attribute, the button will also change it's state to disabled. The other function of the script is to toggle checkboxes and radio buttons, it's a most awaited form replacement for the good old checks and radios.

Options

• STRING-text - the only option for Button, allows you to change a button's text via it's data-OPTION-text="Sample text" attribute.

Example

This is a quick example of button setting state via string options. Like the original script we make an example for loading state for the button. For the purpose of testing here, the button will come back to original state after a short setTimeout delay.

Loading state

Basic Usage

<!-- this is the example button -->
<button type="button" id="myButton" data-toggle="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

//the method works like this
var btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
  new Button(btn,'loading'); //this assumes button has a data-loading-text="Loading..." attribute
});

This action will create an additional data-original-title="Loading state" attribute, required for the below reset method.

//the reset method works like this
new Button(btn,'reset');

Next we will toggle some checkboxes. You should open your console to test the handler functions bound by the change event of the following checkboxes and radio buttons.

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Finally we toggle radio buttons.

Radio 1 Radio 2 (preselected) Radio 3

As a quick note, here's the example for checkboxes.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-default">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-default">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

The ../assets/js/scripts.js file has some console log functions bound by the change of the .btn-group components. When using polyfills and since the change event isn't fired properly on legacy browsers, you can make use of the custom bs.button.change event to bind into context other functions. Example:

//let's do some custom binding action
myCheckBoxesGroup.addEventListener('bs.button.change', function() { 
  // do something when anything inside the btn-group changes	
});
myRadioInput.addEventListener('bs.button.change',function() {
  // do something only when this specific input changes
});

Additional Notes

Button will activate automatically for all .btn-group component instances if they have data-toggle="buttons" and the appropriate input elements inside like our examples here.

The script properly covers the "change" event for checkbox and radio buttons, but via a custom event called bs.button.change, allowing other functions to bind into context. The event is also bound to the .btn-group component, but to use it, you have to use polyfills for legacy browsers.

The script doesn't have any method to control it's toggle functions for checkbox and radio buttons as described by the documentation of the original plugin. Button also doesn't cover single toggle.

Collapse

Collapse is a great way to toggle content, and it's also used for collapsible navbar. It's not animating on modern browsers unless you use the provided CSS, and legacy browsers don't support transitions. Unlike other scripts, this is the only component that can be targeted by it's toggle links by it's className via the data-target="className" attribute, along with the traditional data-target="#collapse-id". The collapsible navbar in Bootstrap for instance works mostly via data-target=".bs-navbar-collapse" attribute.

Collapse requires proper wrapping of contents, similar to wells, accordion and responsive navbar examples. With other words, you cannot toggle a bunch of paragraphs at once unless you wrap them into a container and give it a unique ID and a collapse class.

Options

• duration - the only option required is a 300ms duration internal setting just as in the provided CSS, to emulate transitionend for modern browsers. If you use a different duration, you can specify that via data-duration="DURATION" attribute.

Examples

Here's a quick collapse demonstration, but I would also recommend you to try the navbar on this page on a smaller screen size or on a mobile device.

Link with href Button with data-target

Here's an Accordion component, basically a set of Panel components. When the toggle links are clicked, our Collapse object will look for the closest <div class="accordion-className" or <div id="accordion-id" via data-parent="selector".

Remember that all toggle links must reference the accordion via data-parent="selector" as described above in order to collapse current opened container.

Carousel

Carousel is an excelent content showcase script, and as the original plugin, it handles both slid and slide events, just as shown in the example below.

The script uses an internal duration value (default Bootstrap Carousel transition duration) + 100ms more, needed to emulate transitionend, and during this time, all click handlers are disabled to prevent any animation issue or code bubbles, similar to the original script. On legacy browsers this duration is 100ms and your HTML tag needs a class ie for that.

When configured to pause on hover, it also adds a paused class to it to help prevent any anomalies. The script does not implement the original methods.

Options

• duration - an option to customize the 600ms internal duration required to emulate transitionend for modern browsers. If you use a different duration, you can specify that via data-duration="DURATION" attribute. The default value is 600.
• interval - the time delay between transitions. If you want to use a different interval, you can specify that via data-interval="INTERVAL" attribute. To disable automatic transition, simply use data-interval="false" attribute. The default value is 5000.
• pause - makes possible to pause the carousel transition on mouse hover and touchdown. If you want to disable pause on hover, do that via data-pause="false" attribute. The default value is hover.
• keyboard - enables the carousel to be controllable via left and right keyboard keys. If you want to enable this option, do that via data-keyboard="true" attribute. The default value is false.

Example

This is a test demonstrating the carousel capabilities and it's events, so open your console, and start clicking, you will be noticed before and after the animation.

This is another carousel

This is a caption

This is another caption

Previous Next

The handlers bound to Carousel's specific events explain what happens with the other example in this site's header. Let's have a quick look at it.

//demo myCarousel demonstrating the slid and slide events
var mainSlider = document.getElementById('myCarousel');
mainSlider.addEventListener('slid.bs.carousel', function(e) {
  // get the caption of current active item before slide
  var active = mainSlider.querySelector('.item.active .carousel-caption'); 
  active.classList.remove('slide')
});
mainSlider.addEventListener('slide.bs.carousel', function(e) {
  // get the caption of new active item after slide
  var active = mainSlider.querySelector('.item.active .carousel-caption');
  active.classList.add('slide')
});	

Additional Notes

Carousel does not use DATA API for previous and next navigation controls, which means you can ignore data-slide="prev" and data-slide="next" attributes, but they must have at least class="carousel-control".

The script properly covers both the original custom events slid.bs.carousel and slide.bs.carousel, allowing other functions to bind into context. To use it, you have to use polyfills for legacy browsers.

Affix

Affix is the one little script pinning the side navigation to top once the scroll reaches a certain offset value. It works exactly like the original and requires some additional CSS in order to work properly. When scrolling the page, the given element will receive an affix class once the scroll reaches the target or given offset value, and further more an additional affix-bottom class once the scroll value reaches the maximum scroll height at the given bottom offset.

Options

• target - Affix can pin an element to top once the scroll reaches it's target offsetTop. You can set the target via data-target="target-className" or data-target="#target-ID" attribute.
• offsetTop - allows an element to pin to top when scroll reaches a specific value. This can be set via data-offset-top="OFFSET" attribute, where OFFSET is integer. Via Javascript you can also assign a function to our offsetTop option.
• offsetBottom - allows an element to pin to bottom at a certain offset relative to the window maximum scroll. This can be set via data-offset-bottom="OFFSET" attribute, where OFFSET is integer. Via Javascript you can also assign a function to our offsetBottom option.

Example

Here we go, we'll have a look at our example here and explain things. First we configure an element to be pinned to top and / or bottom.

<ul class="nav nav-stacked" data-spy="affix" data-target="#use" data-offset-bottom="200">

Alternatively, via Javascript we can achieve the same with:

//grab the element by it's ID
var elToAffix = document.getElementById('myNav');
var theAffix = new Affix(elToAffix, {
  target: '#use',
  offsetBottom: 200,
});

Similar to the original plugin, we can make use of a function, we can determine the offsetTop value from the height of the previous element above the initial target:

var elToAffix = document.getElementById('myNav');
var theAffix = new Affix(elToAffix, {
  offsetTop: function(){
    return document.getElementById('myCarousel').offsetHeight
  },
  offsetBottom: 200,
});

Now we must make sure our element is properly styled to make sure it works properly.

/* this style applies to mobile devices, on screens SMALLER than 768px */
/* affix example */
#side-nav {clear: both}
#side-nav .nav.affix,
#side-nav .nav.affix.affix-bottom { position: relative; margin: 20px 0; }

/* this style applies to other devices, on screens LARGER than 768px */
  @media (min-width: 768px) {
  /* affix example */
  #side-nav .nav.affix { position: fixed !important;  width: 263px; top: 0; }
  #side-nav .nav.affix.affix-bottom { top: auto;  bottom: 150px; }
}	

Additional Note

Using static values for offsetTop and / or offsetBottom would work best on non-responsive websites, or when the elements don't change their height when window resize occurs.

The given ../assets/js/script.js also provides a way to automatically resize the pinned element when window resize occurs. Make sure you check that too.