Modal – Carbon Design System

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-oxnb2prg3rp">Show
  modal</button>

<div data-modal id="modal-oxnb2prg3rp" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-oxnb2prg3rp-label" aria-describedby="modal-oxnb2prg3rp-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-oxnb2prg3rp-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-oxnb2prg3rp-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></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>

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-csmlkse31jt">Show
  modal</button>

<div data-modal id="modal-csmlkse31jt" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-csmlkse31jt-label" aria-describedby="modal-csmlkse31jt-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-csmlkse31jt-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-csmlkse31jt-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" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></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>

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-jqciwsyk0pr">Show
  modal</button>

<div data-modal id="modal-jqciwsyk0pr" class="bx--modal bx--modal--danger" role="dialog"
  aria-modal="true" aria-labelledby="modal-jqciwsyk0pr-label" aria-describedby="modal-jqciwsyk0pr-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-jqciwsyk0pr-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-jqciwsyk0pr-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></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>

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-e4nok0oj1s">Show
  modal</button>

<div data-modal id="modal-e4nok0oj1s" class="bx--modal " role="dialog"
  aria-modal="true" aria-labelledby="modal-e4nok0oj1s-label" aria-describedby="modal-e4nok0oj1s-heading" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta" id="modal-e4nok0oj1s-label">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta" id="modal-e4nok0oj1s-heading">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></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-e4nok0oj1s" class="bx--label">Text Input label</label>
        <input id="text-input-e4nok0oj1s" 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>