bootstrap.native
Version:
Bootstrap components build with Typescript
107 lines (96 loc) • 6.23 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BSN Testing Page</title>
<link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.modal { transition-duration: 0.05s }
.modal-dialog { transition-duration: 0.1s }
.modal-backdrop { transition-duration: 0.05s }
</style>
</head>
<body>
<main>
<header class="navbar navbar-expand-lg navbar-dark bg-secondary sticky-top px-3">
<span class="navbar-text">
Navbar text with an inline element
</span>
</header>
<div class="container" style="padding: 5rem 3rem 100vh 3rem">
<h3>Modal Examples</h3>
<a href="#myModal" id="myModalButton" class="btn btn-warning btn-lg" data-bs-toggle="modal">
Launch simple modal
</a>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" data-cy="modal" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal with animation</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Open modal from modal</h4>
<p>Click <a data-bs-toggle="modal" href="#anotherModal">here</a> to open another modal.</p>
<h4>Dismissing the modal is prevented!</h4>
<p>Try selecting this text then click outside the modal dialog, the modal dismissal will be prevented.</p>
<p><button class="btn btn-success btn-lg" data-bs-title="Tooltip Inside Modal" data-bs-toggle="tooltip">Tooltip Inside Modal</button></p>
<h4>Overflowing text to show scroll behavior</h4>
<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>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<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>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<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>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button id="anotherModalButton" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#anotherModal">Next</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<div id="anotherModal" class="modal" data-cy="modal" tabindex="-1" role="dialog" aria-labelledby="anotherModalLabel" aria-hidden="true" data-bs-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="anotherModalLabel">Scrollable Not Animated Modal</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Linked Modal</h4>
<p class="lead">This modal was opened from another modal</p>
<p>This <b>Modal</b> uses <code>data-bs-backdrop="false"</code> intentionally to test the option independently for each instance.</p>
<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>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p><button class="btn btn-success btn-lg" data-bs-title="Tooltip Inside Modal" data-bs-toggle="tooltip">Tooltip Inside Modal</button></p>
</div>
<div class="modal-footer">
<button data-bs-toggle="modal" data-bs-target="#myModal" type="button" class="btn btn-primary">Back</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>