@pageblock/attributes-modal
Version:
Create advanced and accessible modal dialogs for Webflow with no-code.
132 lines (99 loc) • 3.41 kB
Markdown
# @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)
```html
<!-- 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
```bash
npm install @pageblock/attributes-modal
```
```javascript
import { Modal } from '@pageblock/attributes-modal';
import '@pageblock/attributes-modal/index.css';
```
## Usage
### Basic HTML Structure
```html
<!-- 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
```html
<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
```javascript
// 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/out
- `zoom` - Scale and fade effect
- `slide-up` - Slides up from below
- `slide-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
```javascript
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