<div class="obscured-when-dialog-open">
  <button class="js-c-modal-dialog-trigger" type="button" aria-haspopup="true" data-popup="c-modal-dialog-{{id}}">Open dialog</button>
  <p>This is example text. It includes <a href="#">multiple links</a> in order to demonstrate that users are unable to navigate to elements beneath the dialog while it's open (keyboard trap).</p>
  <p>Both the "open dialog" button above and the following link are "triggers" that, when clicked will <a href="#" class="js-c-modal-dialog-trigger" aria-haspopup="true" data-popup="c-modal-dialog-{{id}}">open the dialog</a>. There's no limit to the number of "trigger" buttons and links that can be associated with a dialog. When the dialog closes, focus will be returned to the button or link that caused it to open in the first place.</p>
</div>

<div class="c-modal-dialog c-modal-dialog--{{theme}} js-c-modal-dialog{{#if scrollableModal}} c-modal-dialog--scrollable{{/if}}{{#if inner}} c-modal-dialog--click-close{{/if}}"
  id="c-modal-dialog-{{id}}" role="dialog" aria-labelledby="c-modal-dialog-{{id}}-title" aria-modal="true" hidden>
  {{#if inner}}<div class="c-modal-dialog__inner">{{/if}}
    <div class="c-modal-dialog__toolbar">
      {{> button closeButton }}
    </div>
    <h2 id="c-modal-dialog-{{id}}-title" class="u-visually-hidden">Example modal dialog</h2>
    <div class="c-modal-dialog__contents{{#if scrollableContent}} c-modal-dialog__contents--scrollable{{/if}}">
      <p>Ut molestie pharetra vehicula. Etiam a <a href="#">1 egestas mauris</a>. Mauris posuere metus eu gravida euismod. Aenean metus nisi, dignissim id mi luctus, volutpat accumsan tellus. Integer ut mollis dolor. Suspendisse consectetur orci id placerat aliquam.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">2 nec accumsan orci congue at</a>. Hendrerit odio quis iaculis</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros consectetur, sed finibus ante vehicula. <a href="#">3 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">4 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Eros non erat consectetur, sed finibus ante. <a href="#">5 Maecenas varius</a> accumsan enim, in eleifend ligula. Cras sed tellus consectetur.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">6 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">7 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">8 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">9 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">10 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">11 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">12 nec accumsan orci congue at</a>. Praesent porttitor metus vel lacus ultrices.</p>
      <p>Nam vitae finibus ex. Aenean viverra. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">13 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium, <a href="#">14 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">15 Maecenas varius</a> accumsan enim, in eleifend ligula. Praesent porttitor metus vel lacus ultrices.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">16 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">17 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">18 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">19 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">20 nec accumsan orci congue at</a>. Sed finibus ante vehicula.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Hendrerit odio quis iaculis. Praesent porttitor metus vel lacus, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">21 Maecenas varius</a> accumsan enim, in eleifend ligula. Quis maximus ac, facilisis non quam.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">22 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla eros non erat consectetur, ante vehicula. <a href="#">23 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">24 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">25 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">26 nec accumsan orci congue at</a>. Praesent porttitor metus vel lacus ultrices.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed finibus ante vehicula. <a href="#">27 Maecenas varius</a> accumsan enim, in eleifend ligula. Viverra quis maximus ac.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">28 nec accumsan orci congue at</a>.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur. <a href="#">29 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Varius erat, <a href="#">30 nec accumsan orci congue at</a>. Etiam risus tortor, viverra quis maximus ac.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam vulputate hendrerit odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros consectetur, sed finibus ante. <a href="#">31 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
      <p>Suspendisse id risus lobortis, porta nulla at, pulvinar turpis. Etiam risus tortor, viverra quis maximus ac, facilisis non quam. Cras sed tellus consectetur, euismod ipsum aliquet, efficitur nisl. Mauris pretium varius erat, <a href="#">32 nec accumsan orci congue at</a>. Cras sed tellus consectetur.</p>
      <p>Nam vitae finibus ex. Aenean viverra in nunc vitae imperdiet. Nullam odio quis iaculis. Praesent porttitor metus vel lacus ultrices, eu egestas nulla eleifend. Nulla luctus eros non erat consectetur, sed ante vehicula. <a href="#">33 Maecenas varius</a> accumsan enim, in eleifend ligula.</p>
    </div>
  {{#if inner}}</div>{{/if}}
</div>

<div class="obscured-when-dialog-open">
  <p>These paragraphs will be temporarily hidden from screen readers while the dialog is open.</p>
  <p>Here's more example text with <a href="#">another example link</a>. And here's <a href="#">yet another link</a> that leads nowhere ¯\_(ツ)_/¯</p>
</div>
