> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oppla.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Modals

> Learn how to create and customize modals in Oppla tours

# Modals

Learn how to create and customize modals to display important information or collect user input in your tours.

## Basic Usage

### Create a Modal

```javascript theme={null}
import { createTour } from '@oppla-ai/tours';

const tour = createTour({
  id: 'welcome-tour',
  steps: [
    {
      type: 'modal',
      content: 'Welcome to our application!'
    }
  ]
});

tour.start();
```

### Modal with Options

```javascript theme={null}
{
  type: 'modal',
  content: 'Welcome to our application!',
  title: 'Welcome',
  width: '500px',
  height: 'auto',
  closeButton: true,
  overlay: true
}
```

## Customization

### Styling

Customize modal appearance:

```javascript theme={null}
{
  type: 'modal',
  content: 'Welcome to our application!',
  style: {
    backgroundColor: '#ffffff',
    color: '#000000',
    borderRadius: '8px',
    padding: '24px',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
  }
}
```

### Content

Add rich content to modals:

```javascript theme={null}
{
  type: 'modal',
  content: `
    <div>
      <h2>Welcome to Our App</h2>
      <p>Get started by exploring our features.</p>
      <img src="/welcome-image.png" alt="Welcome" />
      <button onclick="startTour()">Start Tour</button>
    </div>
  `,
  allowHTML: true
}
```

## Advanced Features

### Interactive Modals

Add interactive elements to modals:

```javascript theme={null}
{
  type: 'modal',
  content: `
    <form id="signup-form">
      <input type="email" placeholder="Enter your email" />
      <button type="submit">Sign Up</button>
    </form>
  `,
  allowHTML: true,
  onClose: () => {
    // Handle modal close
  }
}
```

### Conditional Modals

Show modals based on conditions:

```javascript theme={null}
{
  type: 'modal',
  content: 'Welcome to our premium features!',
  showIf: {
    type: 'user-property',
    property: 'plan',
    value: 'premium'
  }
}
```

## Best Practices

1. **Be Clear**: Keep modal content focused and concise
2. **Be Responsive**: Ensure modals work well on all screen sizes
3. **Be Accessible**: Include proper keyboard navigation
4. **Be Consistent**: Use consistent styling and behavior

## Common Issues

### Modal Not Showing

* Check initialization
* Verify content is valid
* Check for z-index conflicts
* Ensure proper event handling

### Styling Issues

* Check CSS conflicts
* Verify responsive design
* Check for overflow issues
* Ensure proper positioning

## Next Steps

<CardGroup cols={2}>
  <Card title="Tooltips" icon="comment" href="/tours/tooltip">
    Learn about tooltip steps
  </Card>

  <Card title="Banners" icon="flag" href="/tours/banner">
    Learn about banner steps
  </Card>
</CardGroup>