Glory modal plugin

Usage

HTML markup

<div class="gmodal" id="exampleModal" role="dialog" aria-labelledby="Modal">
  <div class="gmodal__container">
    <div class="gmodal__dialog">
      <div class="gmodal__header">
        <div class="gmodal__title">Modal</div>
        <button type="button" class="gmodal__close" data-gmodal="dismiss">
            <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.34 6.34l11.32 11.32m-11.32 0L17.66 6.34"/>
          </svg>
        </button>
      </div>
      <div class="gmodal__body">
        Some content
      </div>
      <div class="gmodal__footer">
        <button data-gmodal="dismiss">Close</button>
      </div>
    </div>
  </div>
</div>

Include plugin styles

<link rel="stylesheet" href="gmodal.css" />

Init plugin

var modal = new Gmodal('#exampleModal');

Documentation