Modals come in diffent sizes:
The size can be set by adding class .modal-{size} to the modal element with class .modal-dialog.
The modal-screen is not part of Bootstrap and behaves differently in that the modal is fixed to the screen and the contents are scrolled.
Add class .modal-screen to .modal-dialog to fix the modal to the screen.
<!-- Button type: solid -->
<button data-toggle="modal" data-target="#sg-982a08" type="button" class="vi-btn-solid vi-btn">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade vi-modal" id="sg-982a08" role="dialog" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-screen" 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>Wayfarers celiac microdosing.</h3>
</div>
<div class="vi-modal-layout__close">
<!-- Button type: close -->
<button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
</div>
</div>
<div class="vi-modal-layout__section">
<!-- Content of modal -->
<div class="vi-typesystem">
<p>Blog yuccie butcher. Retro neutra health hammock literally organic. Semiotics pabst ethical 3 wolf moon sartorial whatever. Phlogiston readymade tacos retro. Jean shorts direct trade gastropub bicycle rights. Kogi typewriter etsy heirloom. Quinoa carry tattooed portland banh mi. Brooklyn chicharrones food truck chillwave marfa taxidermy vegan church-key. Forage scenester readymade marfa vinegar flannel hella next level. Twee mlkshk letterpress mustache. Chia polaroid humblebrag twee seitan knausgaard. Ramps try-hard yuccie wayfarers locavore put a bird on it williamsburg. Venmo vhs 3 wolf moon seitan lomo cornhole stumptown master. Church-key jean shorts meggings drinking 3 wolf moon mustache. Pork belly waistcoat wayfarers. Cold-pressed mixtape knausgaard tattooed chicharrones goth.</p>
<p>Squid carry celiac single-origin coffee wes anderson chia. Organic salvia cronut. Sartorial pork belly craft beer park diy. Pbr&b intelligentsia banjo deep v bicycle rights fingerstache taxidermy bespoke. Pinterest flannel bespoke bushwick celiac venmo. Mumblecore organic jean shorts lomo yr vice butcher. Vice cliche typewriter ennui 90's. Loko venmo yolo vinyl selfies blog. Chicharrones meggings stumptown put a bird on it kogi thundercats. Hammock pbr&b art party. Occupy phlogiston beard mlkshk. Craft beer pbr&b tacos neutra. Pbr&b hammock 3 wolf moon williamsburg. Literally meh pitchfork pork belly helvetica 3 wolf moon bespoke freegan. Franzen flexitarian health.</p>
<p>Williamsburg venmo locavore tumblr vegan intelligentsia. Vhs pickled drinking. Listicle keytar meditation. Sriracha 90's franzen gluten-free vinyl swag brunch. Wolf gluten-free 3 wolf moon artisan mixtape thundercats. Hashtag skateboard five dollar toast before they sold out kitsch. Trust fund tote bag cleanse yr carry umami craft beer. Keytar selfies actually blue bottle. Slow-carb ugh pork belly 8-bit meggings gluten-free. Roof cred knausgaard carry celiac meggings. Quinoa tumblr direct trade sartorial small batch franzen green juice beard. Mumblecore +1 ethical schlitz jean shorts seitan yr. Iphone pork belly cardigan muggle magic. Next level tilde hoodie slow-carb jean shorts post-ironic try-hard knausgaard. Twee synth shoreditch mustache pork belly keytar. Tacos cray fixie crucifix. Cold-pressed banjo sartorial xoxo blog lomo tacos.</p>
<p>Helvetica portland cold-pressed. Keffiyeh flannel marfa selvage. Meggings keytar you probably haven't heard of them. Literally pinterest offal jean shorts carry asymmetrical church-key humblebrag. Muggle magic schlitz lo-fi letterpress raw denim yuccie. Lo-fi tacos literally plaid tumblr flannel microdosing. Shoreditch food truck goth pinterest small batch pbr&b. Crucifix yuccie schlitz +1 five dollar toast. 90's heirloom tumblr cred pug street. Freegan photo booth hammock biodiesel put a bird on it wes anderson. Lo-fi pabst yuccie you probably haven't heard of them. Mustache tote bag listicle. Jean shorts muggle magic chillwave five dollar toast park. Gastropub paleo fashion axe. Selfies cleanse tilde. Beard cardigan cornhole disrupt brooklyn cronut health. Fingerstache gentrify literally microdosing humblebrag disrupt.</p>
<p>Yolo schlitz 3 wolf moon bicycle rights. Freegan kickstarter shabby chic beard. Fashion axe vinegar tousled. Beard farm-to-table gentrify. Yr shoreditch hella lo-fi vinyl gentrify. Small batch synth yolo vinyl. Five dollar toast fixie pickled literally microdosing chia. Organic put a bird on it master. Sartorial tofu readymade venmo kale chips gastropub whatever. Jean shorts normcore biodiesel gastropub authentic. Selvage sartorial kale chips try-hard swag lomo bicycle rights plaid. Gentrify fashion axe williamsburg seitan. Kitsch church-key typewriter mixtape trust fund fingerstache fixie park. Fixie drinking helvetica pinterest leggings vegan. Pork belly single-origin coffee whatever cardigan. Chartreuse bitters flexitarian. Pour-over cronut slow-carb food truck gastropub green juice.</p>
<p>Chia umami kickstarter cleanse. Locavore master disrupt. Narwhal cold-pressed plaid. Disrupt ugh bitters 3 wolf moon viral. Typewriter truffaut thundercats tilde artisan. Readymade wayfarers blog twee flannel hashtag semiotics sustainable. 90's sartorial cray viral chillwave tilde squid. Farm-to-table quinoa pinterest. Hammock goth pickled aesthetic schlitz letterpress everyday. Echo slow-carb crucifix brunch shabby chic next level knausgaard. Poutine meggings chillwave beard tumblr tote bag jean shorts muggle magic. Cold-pressed pabst hashtag shoreditch you probably haven't heard of them umami heirloom. Literally pinterest pop-up microdosing keytar muggle magic carry. Williamsburg gastropub cardigan normcore typewriter hella green juice photo booth. Photo booth squid goth microdosing migas shabby chic vhs.</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">Stumptown disrupt</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The following stylesheets are required to display this component.
The following javascript is required to display this component.
Usage documentation can be found here.
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