carbon-components
Version:
Carbon Components is a component library for IBM Cloud
42 lines (30 loc) • 2.42 kB
Markdown
### JavaScript
#### Public Methods
| Name | Params | Description |
|-------------------|------------------|----------------------|
| release | | Deletes the instance |
| show | | Show the modal |
| hide | | Hide the modal |
#### Options
| Option | Default Selector | Description |
|--------------------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| selectorInit | '[data-modal]' | The css selector for root modal component |
| selectorModalClose | '[data-modal-close]' | The selector to find elements that close the modal |
| classVisible | 'is-visible' | Class to toggle visibility of modal |
| attribInitTarget | 'data-modal-target' | The attribute on the launching element to target the modal |
| initEventNames | '['click']' | On specified events, if event matches the attribInitTarget, then initialize the component and run createdByLauncher if method exists |
#### Events
| Event Option | Event Name |
|-------------------|---------------------|
| eventBeforeShown | 'modal-beingshown' |
| eventAfterShown | 'modal-shown' |
| eventBeforeHidden | 'modal-beinghidden' |
| eventAfterHidden | 'modal-hidden' |
### FAQ
#### How do I point multiple elements to the same modal?
To trigger the same modal, you need to add the `data-modal-target` attribute to a element, and then point it to the same id. For example
```html
<button class="bx--btn bx-btn--primary" type="button" data-modal-target="#modal">A button</button>
<button class="bx--btn bx-btn--secondary" type="button" data-modal-target="#modal">Another button</button>
```
Both these buttons would trigger the modal with the id of `modal.`