@pageblock/attributes-modal
v0.1.4
Published
Create advanced and accessible modal dialogs for Webflow with no-code.
Maintainers
pageblockReadme
@pageblock/attributes-modal
Create advanced and accessible modal dialogs for Webflow with no-code.
Features
- Accessibility: Full keyboard navigation, focus trapping, and proper ARIA attributes
- Multiple animations: Fade, zoom, slide-up, slide-down
- Layout variants: Standard modal, bottom sheet, side panels, full-screen mobile
- Z-index management: Automatically handles stacking of multiple modals
- Event callbacks: Hooks for open and close events
- No dependencies: Pure JavaScript with no external libraries required
Installation
CDN (Recommended for Webflow)
<!-- Add to the <head> section -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pageblock/attributes-modal@latest/index.css">
<!-- Add before </body> -->
<script src="https://cdn.jsdelivr.net/npm/@pageblock/attributes-modal@latest/index.js"></script>NPM
npm install @pageblock/attributes-modalimport { Modal } from '@pageblock/attributes-modal';
import '@pageblock/attributes-modal/index.css';Usage
Basic HTML Structure
<!-- Modal Container -->
<pageblock-modal data-modal-id="my-modal" data-animation="zoom">
<!-- Modal Overlay -->
<div data-pb-modal="overlay"></div>
<!-- Modal Content -->
<div data-pb-modal="sheet">
<button data-pb-modal="close" aria-label="Close modal">×</button>
<div style="padding: 2rem;">
<h2>Modal Title</h2>
<p>Your content here...</p>
<button data-pb-modal="close">Close</button>
</div>
</div>
</pageblock-modal>Trigger Elements
<button data-pb-modal-trigger="my-modal">Open Modal</button>
<!-- Or on a link -->
<a href="#" data-pb-modal-trigger="my-modal">Open Modal</a>JavaScript API
// Open a modal programmatically
PageBlockModal.open('my-modal', {
animation: 'zoom',
variant: 'default',
onOpen: (modal, overlay, container) => {
console.log('Modal opened!');
}
});
// Close a modal programmatically
PageBlockModal.close('my-modal', {
onClose: (modal, overlay, container) => {
console.log('Modal closed!');
}
});
// Close all open modals
PageBlockModal.closeAll();Configuration Options
Animation Types
Set the data-animation attribute on the modal container:
fade(default) - Simple fade in/outzoom- Scale and fade effectslide-up- Slides up from belowslide-down- Slides down from above
Layout Variants
Set the data-variant attribute on the modal container:
default(standard centered modal)bottom-sheet(slides up from bottom)side-panel(slides in from right)left-panel(slides in from left)mobile-full(full screen on mobile devices)
Event Listeners
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pageblock-modal').forEach(modal => {
modal.addEventListener('modal:opened', function(event) {
console.log(`Modal opened: ${event.detail.modalId}`);
// Add your analytics code here
});
modal.addEventListener('modal:closed', function(event) {
console.log(`Modal closed: ${event.detail.modalId}`);
// Add your analytics code here
});
});
});License
MIT