| <!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-solid theme-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-solid theme-secondary" data-bs-dismiss="dialog">Close</button> |
| <button type="button" class="btn-solid theme-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-solid theme-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-solid theme-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-solid theme-secondary" data-bs-dismiss="dialog">Close</button> |
| <button type="button" class="btn-solid theme-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-solid theme-secondary" data-bs-dismiss="dialog">Close</button> |
| <button type="button" class="btn-solid theme-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-solid theme-secondary" data-bs-dismiss="dialog">Close</button> |
| </div> |
| </dialog> |
| |
| <div class="d-flex flex-column gap-3"> |
| <div> |
| <button type="button" class="btn-solid theme-primary btn-lg" data-bs-toggle="dialog" data-bs-target="#myDialog"> |
| Launch demo dialog |
| </button> |
| </div> |
| |
| <div> |
| <button type="button" class="btn-solid theme-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-solid theme-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-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#swapDialog1"> |
| Launch swap dialog demo |
| </button> |
| </div> |
| |
| <div> |
| <button type="button" class="btn-solid theme-info btn-lg" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false"> |
| Launch non-modal dialog |
| </button> |
| <small class="fg-secondary">(uses <code>show()</code> instead of <code>showModal()</code>)</small> |
| </div> |
| |
| <div> |
| <button type="button" class="btn-solid theme-secondary btn-lg" id="tall-toggle"> |
| Toggle tall <body> content |
| </button> |
| </div> |
| |
| <div> |
| <button type="button" class="btn-solid theme-secondary btn-lg" id="jsOpen"> |
| Open via JavaScript |
| </button> |
| </div> |
| </div> |
| |
| <br><br> |
| |
| <div class="p-2" id="tall" style="display: none;"> |
| Tall body content to force the page to have a scrollbar. |
| </div> |
| </div> |
| |
| <script type="module"> |
| import { Dialog, Popover, Tooltip } from '../../../dist/js/bootstrap.bundle.js' |
| |
| document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new Popover(popoverEl)) |
| |
| document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new 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 = 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> |
