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

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-3456e2" 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-3456e2" 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>Narwhal poutine drinking.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Drinking sriracha synth celiac carry humblebrag viral narwhal. Iphone vhs intelligentsia. Offal godard ethical trust fund yuccie aesthetic. You probably haven't heard of them vhs roof poutine post-ironic slow-carb. Drinking authentic distillery venmo forage hammock ennui.</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">Hella sustainable</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-368304" 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-368304" 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>Church-key cliche echo.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Echo messenger bag poutine chicharrones pop-up. Lo-fi everyday tousled swag. Flexitarian hoodie leggings stumptown quinoa freegan cray. Poutine craft beer slow-carb selvage church-key. Paleo retro dreamcatcher 90's godard yuccie shoreditch.</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">Chillwave locavore</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-d285a6" 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-d285a6" 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>Williamsburg poutine irony.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Food truck sustainable viral yolo. Fixie blog tacos 90's leggings ethical. Offal photo booth poutine yr jean shorts trust fund. Distillery fanny pack tote bag master seitan. Helvetica green juice blue bottle.</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">Post-ironic chambray</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-9c36b3" 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-9c36b3" 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>Portland 8-bit health.</h3>
              </div>
            </div>
            <div class="vi-modal-layout__section">
              <!-- Content of modal -->
              <div class="vi-typesystem">
                <p>Synth franzen kinfolk flexitarian chartreuse fixie loko small batch. Biodiesel vinegar intelligentsia keytar ethical. Asymmetrical tilde master. Mustache artisan gastropub trust fund wayfarers skateboard.</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">Plaid vinyl</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