To override and extend Bootstrap Modals.
⚠️ WARNING
The modal will not scroll unless using Bootstrap 4.3. CMS uses Bootstrap 4.0. The relevant class is
modal-dialog-scrollable.
<dl>
<dt>Dynamic</dt>
<dd>
<button type="button" class="c-button c-button--secondary" data-toggle="modal" data-target="#exampleModalScrollable">
Launch modal
</button>
<div id="exampleModalScrollable" class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue. Nulla in ante id mi mattis elementum. Proin augue felis, feugiat eu nulla id, laoreet egestas nibh. Praesent pharetra at urna ut ullamcorper. Nam eleifend mauris ex, sit amet sollicitudin quam mollis sed.
</p>
<p>
Maecenas faucibus ut neque hendrerit egestas. Pellentesque id sodales arcu, ac tempus nunc. Integer aliquam a urna vitae molestie. Ut commodo erat porta erat accumsan, et gravida tellus vehicula. Proin ac enim imperdiet, placerat odio sed, pharetra velit. Duis a nunc ut est tincidunt malesuada. Vivamus tristique augue nunc, at dictum ante luctus pretium. Donec ac suscipit lorem. Integer lacus arcu, cursus nec arcu ac, fermentum mollis leo. Praesent quis erat convallis, bibendum nibh eu, sagittis quam. Donec sodales est quis aliquet lacinia.
</p>
<p>
Nunc condimentum pretium lorem, nec malesuada odio consectetur tristique. Morbi condimentum nec massa eu commodo. Praesent faucibus congue risus, auctor rhoncus augue faucibus eget. Cras faucibus et tortor a dignissim. Cras non nibh magna. Aenean quis ullamcorper risus. Mauris molestie, leo vel elementum bibendum, quam ex sodales felis, vulputate laoreet erat nibh at odio. Phasellus eget ante cursus, elementum magna vel, tristique elit. Aenean risus ipsum, ullamcorper tempor ante eu, laoreet venenatis lorem. Sed at vehicula sapien, a ultricies diam.
</p>
<p>
Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
<p>
Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.
</p>
</div>
<div class="modal-footer">
<button type="button" class="c-button c-button--secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="c-button c-button--primary">
Fake action
</button>
</div>
</div>
</div>
</div>
</dd>
<dt>Static</dt>
<dd>
<div id="exampleModalStatic" class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalStaticTitle">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalStaticTitle">Modal title</h5>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="c-button c-button--primary">
Fake action
</button>
</div>
</div>
</div>
</div>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* All Bootstrap pattern library CSS loads for every component */
/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
@import url("./bootstrap--form.demo.css");
@import url("./bootstrap--modal.demo.css");
@import url("./bootstrap--col.demo.css");
@import url("./bootstrap--pagination.demo.css");
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadBootstrap": true
}