# @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
```
### 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 Title
Your content here...
```
### Trigger Elements
```html
Open Modal
```
### 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