Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Modal - Backdrops

v0.0.0

Backdrop colors can be changed

Use following modifiers on .vi-modal:

  • --dominant
  • --accent-1
  • --accent-2
  • --black

Dominant #

If needed, use the modifier .vi-modal--dominant

<!-- Button type: solid  -->
<button data-toggle="modal" data-target="#sg-2b5547" type="button" class="vi-btn-solid vi-btn">Launch text content</button>
<!-- Modal (mods: --dominant) -->
<div class="modal fade vi-modal vi-modal--dominant" id="sg-2b5547" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Modal Layout  -->
        <div class="vi-modal-layout">
          <div class="vi-modal-layout__body">
            <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
              <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
                <h3>Phlogiston kitsch seitan.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Vinegar lo-fi truffaut salvia blue bottle. Mustache photo booth authentic chia neutra pinterest. Whatever bespoke tumblr yolo. Craft beer kinfolk keytar park put a bird on it flexitarian.</p>
              </div>
              <div class="text-center">
                <!-- Button type: solid  -->
                <button data-dismiss="modal" type="button" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn">Irony phlogiston</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Accent-1 #

If needed, use the modifier .vi-modal--accent-1

<!-- Button type: solid  -->
<button data-toggle="modal" data-target="#sg-18ca26" type="button" class="vi-btn-solid vi-btn">Launch text content</button>
<!-- Modal (mods: --accent-1) -->
<div class="modal fade vi-modal vi-modal--accent-1" id="sg-18ca26" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Modal Layout  -->
        <div class="vi-modal-layout">
          <div class="vi-modal-layout__body">
            <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
              <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
                <h3>Humblebrag 8-bit +1.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Goth heirloom leggings everyday. Banh mi venmo direct trade health food truck cardigan. Sriracha shabby chic vegan single-origin coffee vhs. Organic irony chartreuse typewriter semiotics gluten-free bitters everyday.</p>
              </div>
              <div class="text-center">
                <!-- Button type: solid  -->
                <button data-dismiss="modal" type="button" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn">Kogi keffiyeh</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Accent-2 #

If needed, use the modifier .vi-modal--accent-2

<!-- Button type: solid  -->
<button data-toggle="modal" data-target="#sg-d6bddb" type="button" class="vi-btn-solid vi-btn">Launch text content</button>
<!-- Modal (mods: --accent-2) -->
<div class="modal fade vi-modal vi-modal--accent-2" id="sg-d6bddb" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Modal Layout  -->
        <div class="vi-modal-layout">
          <div class="vi-modal-layout__body">
            <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
              <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
                <h3>Ethical irony taxidermy.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Trust fund venmo intelligentsia retro fashion axe. Venmo typewriter kickstarter hella bicycle rights. Swag wayfarers semiotics yolo. Mumblecore xoxo 90's lomo kogi. Tilde fanny pack plaid.</p>
              </div>
              <div class="text-center">
                <!-- Button type: solid  -->
                <button data-dismiss="modal" type="button" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn">Kombucha normcore</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Black #

Some regulations require a black backdrop. If needed, use the modifier .vi-modal--black

<!-- Button type: solid  -->
<button data-toggle="modal" data-target="#sg-5d9760" type="button" class="vi-btn-solid vi-btn">Launch text content</button>
<!-- Modal (mods: --black) -->
<div class="modal fade vi-modal vi-modal--black" id="sg-5d9760" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Modal Layout  -->
        <div class="vi-modal-layout">
          <div class="vi-modal-layout__body">
            <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
              <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
                <h3>Kitsch loko yolo.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Stumptown salvia cornhole 90's disrupt. Shoreditch chicharrones cred asymmetrical tofu neutra. Literally biodiesel pbr&amp;b. Retro occupy viral wes anderson deep v lomo goth.</p>
              </div>
              <div class="text-center">
                <!-- Button type: solid  -->
                <button data-dismiss="modal" type="button" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn">Cronut ennui</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

  • 09 Oct 2025 - fix(modal): Focus next focusable element when no data-dismiss attr is present
  • 09 Oct 2025 - docs(modal): Add focus button test on scrolling long content example.

Fix

  • 25 Jan 2022 - Fix regression remove console.log output.
  • 30 Nov 2022 - Fix regression caused by page-layout iOS overscroll prevention.
  • 30 Sept 2022 - CSS class .vi-modal-body-backdrop--black opaticy. (plus missing docs)
  • Stop Video Component correctly when modal is closed.
  • Original .modal-sm and .modal-md options

Changed

  • Layering (z-index) to not conflict with the Pop Navigation
  • A11y Focus close button on open.

Added

  • 23 Nov 2022 - Additional backdrop colors opaque and no blur.
  • 22 Nov 2022 - Additional backdrop colors with PBS support.
  • 14 Oct 2022 - Add .modal-screen option for screen sized modal.
  • 28 Sept 2022 - CSS class .vi-modal-body-backdrop to add to the body of the page a page.
  • Modifier --black to have a black backdrop, as required by some regulations
  • Example how to open the modal on page load.
  • RTL support
  • Initial draft