Documentation - Modals.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Modals
Marssel includes a flexible and customizable modal system for displaying content in overlapping windows. Modals can be positioned in different ways and automatically adapt to different screen sizes.
Basic setup
Initialize the modal manager on loading:
const marssel = new Marssel();
// The ModalManager is automatically initializedHTML structure
A modal is made up of three main parts:
<!-- Overlay -->
<div id="modal-overlay" class="d-[none] pos-[fixed] top-[0] left-[0] w-[100%] h-[100%] bg-[000000] opacity-[0.65] z-[1001]"></div>
<!-- Modal -->
<div id="modal-default" class="modal-default---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
<!-- Header -->
<div class="modal-header---[d-[flex]+justify-[space-between]+items-[center]+p-[16px]+border-b-[1px_solid_eeeeee]]">
<h4 class="m-[0] fw-[600]">Modal title</h4>
<button class="close-btn close-btn---[bg-[transparent]+border-[none]+cursor-[pointer]+font-size-[24px]]"
onclick="closeModal('modal-default')">×</button>
</div>
<!-- Body -->
<div class="modal-body modal-body---[p-[16px]]">
<p>Content of the modal</p>
</div>
<!-- Footer -->
<div class="modal-footer---[p-[16px]+border-t-[1px_solid_eeeeee]+d-[flex]+justify-[flex-end]]">
<button class="bg-[eaeaea] c-[333] p-[8px_16px] rounded-[4px] border-[1px_solid_ccc] mr-[8px]"
onclick="closeModal('modal-default')">
Cancel
</button>
<button class="bg-[4b7bec] c-[fff] p-[8px_16px] rounded-[4px] border-[none]">Confirm</button>
</div>
</div>Standard Mode (Centered)
Default position in the center of the screen:
<button class="btn-modal" onclick="openModal('modal-centered')">Modal Centered</button>
<div id="modal-centered" class="modal-centered---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
<div class="modal-header">
<h4 class="m-[0] fw-[600]">Modal Centered</h4>
<button class="close-btn" onclick="closeModal('modal-centered')">×</button>
</div>
<div class="modal-body---[p-[16px]]">
<p>This modal is explicitly centered vertically and horizontally.</p>
</div>
<div class="modal-footer">
<button class="bg-[eaeaea] c-[333] p-[8px_16px] rounded-[4px] border-[1px_solid_ccc] mr-[8px]" onclick="closeModal('modal-centered')">Cancel</button>
<button class="bg [4b7bec] c-[fff] p-[8px_16px] rounded-[4px] border-[none]">Confirm</button>
</div>
</div>Modal Top
Positioned at the top of the screen:
<button onclick="openModal('modal-top')">Modal Top</button>
<div id="modal-top" class="modal-top---[d-[none]+pos-[fixed]+top-[20px]+left-[50%]+transform-[translateX(-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
<!-- Content -->
</div>Modal Bottom
Positioned at the bottom of the screen:
<button onclick="openModal('modal-bottom')">Modal Bottom</button>
<div id="modal-bottom" class="modal-bottom---[d-[none]+pos-[fixed]+bottom-[20px]+left-[50%]+transform-[translateX(-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[90%]+max-w-[500px]+shadow-[0_4px_12px_rgba(0,0,0,0.3)]]">
<!-- Content -->
</div>Full Screen Modal
Occupies the entire browser window:
<button onclick="openModal('modal-bottom')">Modal Top</button>
<div id="modal-fullscreen" class="modal-fullscreen---[d-[none]+pos-[fixed]+top-[0]+left-[0]+w-[100%]+h-[100%]+bg-[ffffff]+z-[1001]+overflow-[auto]]">
<!-- Content -->
</div>JavaScript API
Control modals programmatically:
// Open a modal
marssel.modalManager.openModal('modal-id');
// Close a modal
marssel.modalManager.closeModal('modal-id');
// Close all modals
marssel.modalManager.closeAllModals();
// Check if a modal is open
if (marssel.modalManager.isOpen('modal-id')) {
// ...
}Events
Listen to the opening and closing events:
// When clicking on the overlay
document.getElementById('modal-overlay').addEventListener('click', () => {
marssel.modalManager.closeAllModals();
});
// Keypad Shutdown (ESC)
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
marssel.modalManager.closeAllModals();
}
});Modally Responsive
Adapt the size of the modal according to the screen:
<div id="modal-responsive" class="modal---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+w-[95%]+max-w-[400px]] md--modal---[max-w-[600px]] lg--modal---[max-w-[800px]]">
<!-- Content -->
</div>Entertainment
Add transitions for a better UX:
<div id="modal-animated" class="modal---[d-[none]+pos-[fixed]+top-[50%]+left-[50%]+transform-[translate(-50%,-50%)]+bg-[ffffff]+rounded-[8px]+z-[1001]+opacity-[0]+transition-[all_0.3s_ease]]">
<!-- Content -->
</div>// Add animation class to opening
marssel.modalManager.onOpen('modal-animated', (modal) => {
setTimeout(() => {
modal.style.opacity = '1';
}, 10);
});Modal Centered
This modal is explicitly centered vertically and horizontally.
Modal Top
This modal is positioned at the top of the screen.
Modal Bottom
This modal is positioned at the bottom of the screen.
Full Screen Modal
This modal occupies the entire screen.
Ideal for displaying a lot of content or on small screens.
End of content with scrolling.