Modal

<dialog data-ecl-auto-init="Modal" data-ecl-modal-toggle="modal-toggle" id="modal-example" aria-modal="true"
  class="ecl-modal ecl-modal--l" aria-labelledby="modal-example-header">
  <div class="ecl-modal__container ecl-container">
    <div class="ecl-modal__content ecl-col-12 ecl-col-m-10 ecl-col-l-8">
      <header class="ecl-modal__header">
        <div class="ecl-modal__header-content" id="modal-example-header">Modal title</div><button
          class="ecl-button ecl-button--tertiary ecl-modal__close ecl-button--icon-only" type="button"
          data-ecl-modal-close><span class="ecl-button__container"><span class="ecl-button__label"
              data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false"
              aria-hidden="true" data-ecl-icon>
              <use xlink:href="/dist/media/icons.b6764719.svg#close"></use>
            </svg></span></button>
      </header>
      <div class="ecl-modal__body">
        <div class="ecl-modal__body-scroll" data-ecl-modal-scroll>Scrollable content: <br />Sed quam augue, volutpat sed
          dapibus in, accumsan a arcu. Nulla quam enim, porttitor at neque a, egestas porttitor tortor. Nam tortor sem,
          elementum id augue quis, posuere vestibulum dui. Donec id posuere libero, sit amet egestas lorem. Aliquam
          finibus ipsum mauris, a molestie tortor laoreet. Morbi interdum orci arcu, tempor porta nisl elementum non.
          Morbi blandit risus sed turpis mollis mattis. Maecenas semper, risus nec sollicitudin aliquet, dui eros
          vehicula nulla, ac bibendum mauris mauris a lectus. Ut ut justo in sem vestibulum mollis. Pellentesque ac
          commodo erat. Phasellus vitae aliquet mi. Suspendisse sed nisl feugiat, porta ante a, finibus nisi.<br />Sed
          quam augue, volutpat sed dapibus in, accumsan a arcu. Nulla quam enim, porttitor at neque a, egestas porttitor
          tortor. Nam tortor sem, elementum id augue quis, posuere vestibulum dui. Donec id posuere libero, sit amet
          egestas lorem. Aliquam finibus ipsum mauris, a molestie tortor laoreet. Morbi interdum orci arcu, tempor porta
          nisl elementum non. Morbi blandit risus sed turpis mollis mattis. Maecenas semper, risus nec sollicitudin
          aliquet, dui eros vehicula nulla, ac bibendum mauris mauris a lectus. Ut ut justo in sem vestibulum mollis.
          Pellentesque ac commodo erat. Phasellus vitae aliquet mi. Suspendisse sed nisl feugiat, porta ante a, finibus
          nisi.</div>
        <div class="ecl-modal__body-overflow" aria-hidden="true"></div>
        <div class="ecl-modal__body-fixed">
          <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
              id="checkbox-default-1" value="1" /><label for="checkbox-default-1" class="ecl-checkbox__label"><span
                class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
                  aria-hidden="true">
                  <use xlink:href="/dist/media/icons.b6764719.svg#check"></use>
                </svg></span><span class="ecl-checkbox__text">Option label</span></label></div>
        </div>
      </div>
      <footer class="ecl-modal__footer">
        <div class="ecl-modal__footer-content"><button class="ecl-button ecl-button--secondary ecl-modal__button"
            type="button" data-ecl-modal-close>Close</button><button
            class="ecl-button ecl-button--primary ecl-modal__button" type="submit">Submit</button></div>
      </footer>
    </div>
  </div>
</dialog>