Content here that may need to be scrolled - can be text/forms/etc.

Code for default modal, simple & alert below;

Default modal with scrollable content:

<div class="overlay">
</div>
<div class="modal modal--show">
  <div class="modal__header">
    <div class="modal__title">Modal title</div>
    <div class="modal__close"><i class="material-icons">close</i></div>
  </div>
  <div class="modal__content">
    Content here etc
  </div>
  <div class="modal__footer">
    <div class="modal__button">
      <button class="button button--link">Action 1</button>
      <button class="button button--link">Action 2</button>
    </div>
  </div>
</div>

 

Code for simple modal with non scrolling content area

<div class="overlay">
</div>
<div class="modal modal--simple modal--show">
  <div class="modal__header modal__header--simple">
    <div class="modal__title">Modal title</div>
    <div class="modal__close"><i class="material-icons">close</i></div>
  </div>
  <div class="modal__content modal__content--simple">
    Content here etc
  </div>
  <div class="modal__footer modal__footer--simple">
    <div class="modal__button">
      <button class="button button--link">Action 1</button>
      <button class="button button--link">Action 2</button>
    </div>
  </div>
</div>

 

Code for alert modal

<div class="overlay">
</div>
<div class="modal modal--alert modal--show">
  <div class="modal__header modal__header--alert">
  </div>
  <div class="modal__content modal__content--alert">
    Content here etc
  </div>
  <div class="modal__footer modal__footer--alert">
    <div class="modal__button">
      <button class="button button--link">Action 1</button>
      <button class="button button--link">Action 2</button>
    </div>
  </div>
</div>