Modal

Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-ub26669qi7">Show
  modal</button>

<div data-modal id="modal-ub26669qi7" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-ub26669qi7-label" aria-describedby="modal-ub26669qi7-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-ub26669qi7-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-ub26669qi7-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
      </button>
    </div>

    <!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->

    <div class="bx--modal-content" >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
        vitae
        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
        facilisi.
        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>

          </div>
    <div class="bx--modal-content--overflow-indicator"></div>

    <div class="bx--modal-footer">
      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
      <button class="bx--btn bx--btn--primary" type="button"   data-modal-primary-focus>Primary button</button>
    </div>
  </div>
  <!-- Note: focusable span allows for focus wrap feature within Modals -->
  <span tabindex="0"></span>
</div>
Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-6mvdyj8hwak">Show
  modal</button>

<div data-modal id="modal-6mvdyj8hwak" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-6mvdyj8hwak-label" aria-describedby="modal-6mvdyj8hwak-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-6mvdyj8hwak-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-6mvdyj8hwak-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal"  data-modal-primary-focus>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
      </button>
    </div>

    <!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->

    <div class="bx--modal-content" >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
        vitae
        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
        facilisi.
        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>

          </div>
    <div class="bx--modal-content--overflow-indicator"></div>

  </div>
  <!-- Note: focusable span allows for focus wrap feature within Modals -->
  <span tabindex="0"></span>
</div>
Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button class="bx--btn bx--btn--danger" type="button" data-modal-target="#modal-fvyirzibbwe">Show
  modal</button>

<div data-modal id="modal-fvyirzibbwe" class="bx--modal bx--modal--danger" role="dialog"
  aria-modal="true" aria-labelledby="modal-fvyirzibbwe-label" aria-describedby="modal-fvyirzibbwe-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-fvyirzibbwe-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-fvyirzibbwe-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
      </button>
    </div>

    <!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->

    <div class="bx--modal-content" >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
        vitae
        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
        facilisi.
        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>

          </div>
    <div class="bx--modal-content--overflow-indicator"></div>

    <div class="bx--modal-footer">
      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
      <button class="bx--btn bx--btn--danger" type="button"  aria-label="Danger"
          data-modal-primary-focus>Primary button</button>
    </div>
  </div>
  <!-- Note: focusable span allows for focus wrap feature within Modals -->
  <span tabindex="0"></span>
</div>
Vanilla JS
React Vue CodePen
Code:
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-pw16vzm73uf">Show
  modal</button>

<div data-modal id="modal-pw16vzm73uf" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-pw16vzm73uf-label" aria-describedby="modal-pw16vzm73uf-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-pw16vzm73uf-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-pw16vzm73uf-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
      </button>
    </div>

    <!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->

    <div class="bx--modal-content bx--modal-content--with-form" >
      <div class="bx--form-item">
        <label for="text-input-pw16vzm73uf" class="bx--label">Text Input label</label>
        <input id="text-input-pw16vzm73uf" type="text" class="bx--text-input" placeholder="Optional placeholder text"
          data-modal-primary-focus>
      </div>
    </div>
    <div class="bx--modal-content--overflow-indicator"></div>

    <div class="bx--modal-footer">
      <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
      <button class="bx--btn bx--btn--primary" type="button"  >Primary button</button>
    </div>
  </div>
  <!-- Note: focusable span allows for focus wrap feature within Modals -->
  <span tabindex="0"></span>
</div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--modal class.

Name Description
.bx--modal--danger Selector for applying danger modal styles

JavaScript

Getting component class reference

ES2015
import { Modal } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Modal = CarbonComponents.Modal;

Instantiating

For one with a trigger button (a <button> with data-modal-target attribute)
Modal.init();
For one without a trigger button
// `#my-modal` is an element with `[data-modal]` attribute
Modal.create(document.getElementById('my-modal'));

Public methods

Name Params Description
release Deletes the instance
show Show the modal
hide Hide the modal
Example - Showing modal
// `#my-modal` is an element with `[data-modal]` attribute
var modalInstance = Modal.create(document.getElementById('my-modal'));
modalInstance.show();

Options

Option Default selector Description
selectorInit '[data-modal]' The css selector for root modal component
selectorModalClose '[data-modal-close]' The selector to find elements that close the modal
selectorPrimaryFocus '[data-modal-primary-focus]' The CSS selector to determine the element to put focus when modal gets open
classVisible 'is-visible' Class to toggle visibility of modal
classBody 'bx--body--with-modal-open' Class on <body> that toggles when a modal opens/closes
attribInitTarget 'data-modal-target' The attribute on the launching element to target the modal
initEventNames '['click']' On specified events, if event matches the attribInitTarget, then initialize the component and run createdByLauncher if method exists
Example - Putting focus on text box when modal gets open
<div
  data-modal
  id="my-modal"
  class="bx--modal "
  role="dialog"
  aria-modal="true"
  aria-labelledby="my-modal-label"
  aria-describedby="my-modal-heading"
  tabindex="-1"
>
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__heading bx--type-beta" id="my-modal-heading">
        Modal heading
      </p>
      <button
        class="bx--modal-close"
        type="button"
        data-modal-close
        aria-label="close modal"
      >
        (The close button image)
      </button>
    </div>
    <div class="bx--modal-content">
      <label for="my-text-input" class="bx--label">Text Input label</label>
      <input
        id="my-text-input"
        type="text"
        class="bx--text-input"
        placeholder="Optional placeholder text"
        data-modal-primary-focus
      />
    </div>
  </div>
</div>

Events

Event option Event name
eventBeforeShown 'modal-beingshown'
eventAfterShown 'modal-shown'
eventBeforeHidden 'modal-beinghidden'
eventAfterHidden 'modal-hidden'
Example - Preventing modals from being closed in a certain condition
document.addEventListener('modal-beinghidden', function(evt) {
  if (myApplication.shouldModalKeptOpen(evt.target)) {
    evt.preventDefault();
  }
});
Example - Notifying events of all modals being closed to an analytics library
document.addEventListener('modal-hidden', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Modal hidden',
    id: evt.target.id,
  });
});

FAQ

How do I point multiple elements to the same modal?

To trigger the same modal, you need to add the data-modal-target attribute to a element, and then point it to the same id. For example

<button
  class="bx--btn bx-btn--primary"
  type="button"
  data-modal-target="#modal"
>
  A button
</button>
<button
  class="bx--btn bx-btn--secondary"
  type="button"
  data-modal-target="#modal"
>
  Another button
</button>

Both these buttons would trigger the modal with the id of modal.

Edit this page on GitHub
Previous
Components: Loading
Next
Modal: Usage