Overlay

The MUI JS library provides an overlay method which can be used to darken the viewport and disable scrolling. To implement features such as modal dialogs, simply add your modal element to the overlay as a child element:

<script>
  // turn on (returns overlay element)
  var overlayEl = mui.overlay('on');

  // set overlay options
  var options = {
    'keyboard': true, // teardown when <esc> key is pressed (default: true)
    'static': false, // maintain overlay when clicked (default: false)
    'onclose': function() {} // execute function when overlay is closed
  };
  mui.overlay('on', options);

  // initialize with child element
  var childEl = document.createElement('div');
  mui.overlay('on', childEl);

  // options and child element
  mui.overlay('on', options, childEl);
  
  // teardown (automatically detaches children)
  mui.overlay('off');
</script>

Example

<script>
  function activateOverlay() {
    // show overlay
    mui.overlay('on');
  }
</script>
<button class="mui-btn mui-btn--primary" onclick="activateOverlay()">Activate overlay</button>
View in new tab »

Modal Example

<script>
  function activateModal() {
    // initialize modal element
    var modalEl = document.createElement('div');
    modalEl.style.width = '400px';
    modalEl.style.height = '300px';
    modalEl.style.margin = '100px auto';
    modalEl.style.backgroundColor = '#fff';

    // show modal
    mui.overlay('on', modalEl);
  }
</script>
<button class="mui-btn mui-btn--primary" onclick="activateModal()">Activate modal</button>
View in new tab »
« Previous Next »