### SCSS #### Modifiers Use these modifiers with `.bx--modal` class. | Name | Description | | -------------------- | ----------------------------------------- | | `.bx--modal--danger` | Selector for applying danger modal styles | ### JavaScript #### Getting component class reference ##### ES2015 ```javascript import { Modal } from 'carbon-components'; ``` ##### With pre-build bundle (`carbon-components.min.js`) ```javascript var Modal = CarbonComponents.Modal; ``` #### Instantiating ##### For one with a trigger button (a ` ``` #### Events | Event option | Event name | | ------------------- | ------------------- | | `eventBeforeShown` | 'modal-beingshown' | | `eventAfterShown` | 'modal-shown' | | `eventBeforeHidden` | 'modal-beinghidden' | | `eventAfterHidden` | 'modal-hidden' | ##### Example - Preventing modals from being closed in a certain condition ```javascript document.addEventListener('modal-beinghidden', function(evt) { if (myApplication.shouldModalKeptOpen(evt.target)) { evt.preventDefault(); } }); ``` ##### Example - Notifying events of all modals being closed to an analytics library ```javascript document.addEventListener('modal-hidden', function(evt) { myAnalyticsLibrary.send({ action: 'Modal hidden', id: evt.target.id, }); }); ``` ### 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 ``` Both these buttons would trigger the modal with the id of `modal.`