dialog

// src/components/elements/dialog/dialog.html.twig

<dialog id="{{ id }}" class="Dialog">
  <button type="button" class="Dialog-close" onclick="this.closest('dialog').close();">
    Schließen
    {% include "@elements/icon/icon.html.twig" with {
      name: "cross"
    } only %}
  </button>
  <div class="Dialog-content">
    {% include "@patterns/stage/stage.html.twig" with {
      headline: dialog_headline,
      subline: dialog_subline,
      copy: dialog_copy,
      button: dialog_button,
      image: dialog_image,
      italic_subline: true,
      center_button_mobile: true,
    } only %}
  </div>
</dialog>

{% if is_open %}
  <script>
    window.scrollTo({ top: 0, behavior: "smooth" });
    document.getElementById("{{ id }}").showModal();
  </script>
{% endif %}

<script>
  document.getElementById("{{ id }}").querySelector('.Stage-button').onclick = function() { this.closest('dialog').close(); };
</script>