mirror of https://github.com/twbs/bootstrap.git
208 lines
9.0 KiB
HTML
208 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<title>Dialog</title>
|
|
<style>
|
|
#tall {
|
|
height: 1500px;
|
|
width: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-3">
|
|
<h1>Dialog <small>Bootstrap Visual Test</small></h1>
|
|
|
|
<dialog class="dialog" id="myDialog">
|
|
<div class="dialog-header">
|
|
<h1 class="dialog-title">Dialog title</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<h4>Text in a dialog</h4>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
|
|
<h4>Popover in a dialog</h4>
|
|
<p>This <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
|
|
|
|
<h4>Tooltips in a dialog</h4>
|
|
<p><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
|
|
|
|
<hr>
|
|
|
|
<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>
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="dialog" id="staticBackdropDialog">
|
|
<div class="dialog-header">
|
|
<h1 class="dialog-title">Static Backdrop Dialog</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<p>This dialog has a static backdrop. Clicking outside won't close it.</p>
|
|
<p>Press Escape or click the close button to dismiss.</p>
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="dialog" id="noKeyboardDialog">
|
|
<div class="dialog-header">
|
|
<h1 class="dialog-title">No Keyboard Dismiss</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<p>This dialog cannot be dismissed with the Escape key.</p>
|
|
<p>You must use the close button.</p>
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="dialog" id="swapDialog1">
|
|
<div class="dialog-header">
|
|
<h1 class="dialog-title">First Dialog</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<p>Click the button below to swap to the second dialog.</p>
|
|
<p>Notice how the backdrop stays visible during the swap.</p>
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to Second Dialog</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="dialog" id="swapDialog2">
|
|
<div class="dialog-header">
|
|
<h1 class="dialog-title">Second Dialog</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<p>You're now in the second dialog!</p>
|
|
<p>You can swap back to the first dialog or close this one.</p>
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to First Dialog</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="dialog" id="nonModalDialog">
|
|
<div class="dialog-header">
|
|
<h1 class="dialog-title">Non-Modal Dialog</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<p>This is a <strong>non-modal</strong> dialog opened with <code>show()</code> instead of <code>showModal()</code>.</p>
|
|
<ul>
|
|
<li>No backdrop</li>
|
|
<li>No focus trapping</li>
|
|
<li>Can interact with the page behind</li>
|
|
<li>Escape key still closes (if keyboard: true)</li>
|
|
</ul>
|
|
<p>Try clicking the buttons on the page behind this dialog!</p>
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<div class="d-flex flex-column gap-3">
|
|
<div>
|
|
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="dialog" data-bs-target="#myDialog">
|
|
Launch demo dialog
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
|
|
Launch static backdrop dialog
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#noKeyboardDialog" data-bs-keyboard="false">
|
|
Launch no-keyboard dialog
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
|
|
Launch swap dialog demo
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" class="btn btn-info btn-lg" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
|
|
Launch non-modal dialog
|
|
</button>
|
|
<small class="text-muted">(uses <code>show()</code> instead of <code>showModal()</code>)</small>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn-lg" id="tall-toggle">
|
|
Toggle tall <body> content
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" class="btn btn-secondary btn-lg" id="jsOpen">
|
|
Open via JavaScript
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<div class="text-bg-dark p-2" id="tall" style="display: none;">
|
|
Tall body content to force the page to have a scrollbar.
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../../dist/js/bootstrap.bundle.js"></script>
|
|
<script>
|
|
/* global bootstrap: false */
|
|
|
|
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
|
|
|
|
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
|
|
|
|
const tall = document.getElementById('tall')
|
|
document.getElementById('tall-toggle').addEventListener('click', () => {
|
|
tall.style.display = tall.style.display === 'none' ? 'block' : 'none'
|
|
})
|
|
|
|
// Test JavaScript API
|
|
document.getElementById('jsOpen').addEventListener('click', () => {
|
|
const dialogEl = document.getElementById('myDialog')
|
|
const dialog = bootstrap.Dialog.getOrCreateInstance(dialogEl)
|
|
dialog.show()
|
|
})
|
|
|
|
// Log events for debugging
|
|
document.querySelectorAll('.dialog').forEach(dialogEl => {
|
|
dialogEl.addEventListener('show.bs.dialog', () => console.log('show.bs.dialog', dialogEl.id))
|
|
dialogEl.addEventListener('shown.bs.dialog', () => console.log('shown.bs.dialog', dialogEl.id))
|
|
dialogEl.addEventListener('hide.bs.dialog', () => console.log('hide.bs.dialog', dialogEl.id))
|
|
dialogEl.addEventListener('hidden.bs.dialog', () => console.log('hidden.bs.dialog', dialogEl.id))
|
|
dialogEl.addEventListener('cancel.bs.dialog', () => console.log('cancel.bs.dialog', dialogEl.id))
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|