npm package: @pageblock/attributes-modal
Description: Create advanced and accessible modal dialogs for Webflow with no-code.
Author: PageBlock
Latest version: 0.1.4

# @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