📱 Basic Modal
📏 Modal Sizes
🖥️ Fullscreen Modals
🎨 Modal Types
⚡ Advanced Features
💻 Source Code Examples
Basic Modal HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>Modal Sizes
<!-- Small Modal -->
<div class="modal-dialog modal-sm">
<!-- Large Modal -->
<div class="modal-dialog modal-lg">
<!-- Extra Large Modal -->
<div class="modal-dialog modal-xl">
<!-- Fullscreen Modal -->
<div class="modal-dialog modal-fullscreen">
<!-- Responsive Fullscreen -->
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-dialog modal-fullscreen-xxl-down">Modal Options
<!-- Vertically Centered -->
<div class="modal-dialog modal-dialog-centered">
<!-- Scrollable -->
<div class="modal-dialog modal-dialog-scrollable">
<!-- Static Backdrop -->
<div class="modal fade" data-bs-backdrop="static">
<!-- No Backdrop -->
<div class="modal fade" data-bs-backdrop="false">JavaScript API
// Show modal
var myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.show()
// Hide modal
myModal.hide()
// Toggle modal
myModal.toggle()
// Handle events
myModal.addEventListener('shown.bs.modal', function () {
// Modal is shown
})
// Advanced usage with options
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
backdrop: 'static',
keyboard: false,
focus: true
})Advanced Modal Examples
// Advanced Modal Management
class ModalManager {
constructor() {
this.modals = new Map();
this.init();
}
init() {
// Initialize all modals on the page
document.querySelectorAll('.modal').forEach(modal => {
const modalId = modal.id;
this.modals.set(modalId, new bootstrap.Modal(modal));
});
}
// Show modal with custom options
show(modalId, options = {}) {
const modal = this.modals.get(modalId);
if (modal) {
// Update options if provided
if (options.backdrop !== undefined) {
modal._config.backdrop = options.backdrop;
}
if (options.keyboard !== undefined) {
modal._config.keyboard = options.keyboard;
}
modal.show();
}
}
// Hide modal
hide(modalId) {
const modal = this.modals.get(modalId);
if (modal) {
modal.hide();
}
}
// Toggle modal
toggle(modalId) {
const modal = this.modals.get(modalId);
if (modal) {
modal.toggle();
}
}
// Show confirmation modal
showConfirmation(title, message, onConfirm, onCancel) {
const modal = document.getElementById('confirmationModal');
const modalTitle = modal.querySelector('.modal-title');
const modalBody = modal.querySelector('.modal-body');
modalTitle.textContent = title;
modalBody.textContent = message;
// Remove existing event listeners
const confirmBtn = modal.querySelector('.btn-confirm');
const cancelBtn = modal.querySelector('.btn-cancel');
confirmBtn.replaceWith(confirmBtn.cloneNode(true));
cancelBtn.replaceWith(cancelBtn.cloneNode(true));
// Add new event listeners
modal.querySelector('.btn-confirm').addEventListener('click', () => {
onConfirm();
bootstrap.Modal.getInstance(modal).hide();
});
modal.querySelector('.btn-cancel').addEventListener('click', () => {
if (onCancel) onCancel();
bootstrap.Modal.getInstance(modal).hide();
});
this.show('confirmationModal');
}
// Show loading modal
showLoading(message = 'Loading...') {
const modal = document.getElementById('loadingModal');
const modalBody = modal.querySelector('.modal-body p');
modalBody.textContent = message;
this.show('loadingModal');
}
// Hide loading modal
hideLoading() {
this.hide('loadingModal');
}
}
// Usage example
const modalManager = new ModalManager();
// Show confirmation
modalManager.showConfirmation(
'Delete Item',
'Are you sure you want to delete this item?',
() => ,
() => );
// Show loading
modalManager.showLoading('Saving data...');
setTimeout(() => modalManager.hideLoading(), 3000);🎮 HUD Modals
Futuristic modal dialogs with glassmorphism and glowing effects:
HUD Modal Structure
<div class="modal fade modal-hud" id="hudModal" tabindex="-1"
aria-labelledby="hudModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="hud-header-svg-container" aria-hidden="true">
@include("components.hud.modal-header-svg")
</div>
<h5 class="modal-title orbitron" id="hudModalLabel">System Alert</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal content goes here.</p>
</div>
<div class="modal-footer">
<div class="hud-footer-svg-container" aria-hidden="true">
@include("components.hud.modal-footer-svg")
</div>
<button type="button" class="btn btn-cyber" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Trigger -->
<button class="btn btn-cyber" data-bs-toggle="modal" data-bs-target="#hudModal">
Launch HUD Modal
</button>