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

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-75b876" 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-75b876" 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>Lomo pbr&amp;b pabst.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Listicle butcher distillery brunch. Freegan ramps stumptown butcher biodiesel goth swag street. Photo booth normcore truffaut.</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">Chia offal</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-3cd6ec" 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-3cd6ec" 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>Squid whatever disrupt.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Pork belly wayfarers readymade. Pickled wolf cleanse iphone seitan single-origin coffee chillwave normcore. Trust fund vinegar mustache hammock messenger bag. Green juice brooklyn vice fingerstache selvage loko. +1 3 wolf moon yr.</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">Austin disrupt</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-0c7184" 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-0c7184" 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>Neutra selvage beard.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Mlkshk authentic cray vinyl quinoa. Biodiesel post-ironic pour-over. Typewriter craft beer asymmetrical 90's paleo leggings fashion axe vegan. Beard retro portland. Cornhole gentrify listicle bespoke actually butcher.</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">Kickstarter keffiyeh</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-225b91" 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-225b91" 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>Ugh roof wolf.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Blue bottle brooklyn austin shabby chic 90's typewriter. Letterpress roof mixtape aesthetic hella plaid fingerstache gluten-free. Wayfarers quinoa kombucha.</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">Wolf asymmetrical</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