locus |ˈlōkəs| Modal Widget

          
<modal-widget>
  Modal content here
</modal-widget>
        

Attributes

fullscreen attribute

          
<modal-widget fullscreen>
  Fullscreen content
</modal-widget>
        

open attribute

          
<modal-widget open>
  Modal content is immediately shown
</modal-widget>
        

initialfocus attribute

          
<modal-widget initialfocus="email-addess">
  <input id="email-address" type="email">
  Element is focused when the dialog is shown.
</modal-widget>
        

Id of an element to focus on when the dialog is shown.

closefocus attribute

          
<button id="trigger" onclick="document.querySelector( 'modal-widget' ).toggle()">Open</button>

<modal-widget closefocus="trigger">
  Modal content here
</modal-widget>
        

Id of an element to focus on when the dialog is hidden.

JavaScript API

Hiding and showing

          
var modal = document.querySelector( 'modal-widget' );
modal.show();
modal.hide();
modal.toggle();
        

Events

          
var modal = document.querySelector( 'modal-widget' );
modal.addEventListener('show', function () {
  // `this` is the modal context.
});
        

• ready
• show
• hide

CSS

Style like any other HTML element.

          
<modal-widget>
  <h1>Yo</h1>
<modal-widget>
        

          
modal-widget h1 {
  font-size: larger;
}
        

The modal-element's Shadow DOM may also be targeted.

          
modal-widget::shadow #mask {
  background: rgba(0, 0, 0, .9);
}