Modal

id: w-c-7

How it works

Modal need to have unique id
To open modal. Add to wanted element data-target="id-of-your-modal"
css class for closing the modal c-modal__close
- (Close element needs to be inside of modal element)
usecase: if you need different element to close the modal. For example close button.
usecase: I need to reinit modals listeners after fetch request
- import from modal.ts -> init function and call again when needed

Default with block/slot content usage

Open

my exmaple content 01 Go away

        {% include "@Components/button/button.twig" with {props: {
    title: "Open",
    data: {
      "modal-target": "modal-example-01"
    }
  }
} %}

{% embed "@Components/modal/modal.twig" with {props: {id: "modal-example-01"}} %}
  {% block content %}
    my exmaple content 01
    <a href="https://www.seznam.cz/">Go away</a>
  {% endblock %}
{% endembed %}

          <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#' data-modal-target="modal-example-01">
      <span class="btn__title u-z-index-1">
      Open
    </span>
      
  
  </a>

  <div class="c-modal   --hidden" id="modal-example-01">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

        
        <div class="c-modal__body ">
              my exmaple content 01
    <a href="https://www.seznam.cz/">Go away</a>
          </div>

        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>

Modal with header

Open

Example title

modal with header

        {% include "@Components/button/button.twig" with {props: {
    title: "Open",
    data: {
      "modal-target": "modal-example-02"
    }
  }
} %}

{% embed "@Components/modal/modal.twig" with {props: {
  id: "modal-example-02",
  header: {
    title: "Example title",
  }
  }} %}
  {% block content %}
    modal with header
  {% endblock %}
{% endembed %}

          <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#' data-modal-target="modal-example-02">
      <span class="btn__title u-z-index-1">
      Open
    </span>
      
  
  </a>

  <div class="c-modal   --hidden" id="modal-example-02">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

                  <header class="c-modal__header d-flex flex-column gap-1">
            <h2 class="u-h3 c-modal__heading">Example title</h2>
                      </header>
        
        <div class="c-modal__body ">
              modal with header
          </div>

        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>

Size XL (Large)

Open

Example title

large modal

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

        {% include "@Components/button/button.twig" with {props: {
    title: "Open",
    data: {
      "modal-target": "modal-example-03"
    }
  }
} %}

{% embed "@Components/modal/modal.twig" with {props: {
  id: "modal-example-03",
  size: "xl",
  header: {
    title: "Example title",
  }
  }} %}
  {% block content %}
    <h3>large modal</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
  {% endblock %}
{% endembed %}

          <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#' data-modal-target="modal-example-03">
      <span class="btn__title u-z-index-1">
      Open
    </span>
      
  
  </a>

  <div class="c-modal --size-xl  --hidden" id="modal-example-03">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

                  <header class="c-modal__header d-flex flex-column gap-1">
            <h2 class="u-h3 c-modal__heading">Example title</h2>
                      </header>
        
        <div class="c-modal__body ">
              <h3>large modal</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
          </div>

        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>

Size SM (Small)

Open

Example title

Small modal

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

        {% include "@Components/button/button.twig" with {props: {
    title: "Open",
    data: {
      "modal-target": "modal-example-04"
    }
  }
} %}

{% embed "@Components/modal/modal.twig" with {props: {
  id: "modal-example-04",
  size: "sm",
  header: {
    title: "Example title",
  }
  }} %}
  {% block content %}
    <h3>Small modal</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
  {% endblock %}
{% endembed %}

          <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#' data-modal-target="modal-example-04">
      <span class="btn__title u-z-index-1">
      Open
    </span>
      
  
  </a>

  <div class="c-modal --size-sm  --hidden" id="modal-example-04">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

                  <header class="c-modal__header d-flex flex-column gap-1">
            <h2 class="u-h3 c-modal__heading">Example title</h2>
                      </header>
        
        <div class="c-modal__body ">
              <h3>Small modal</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
          </div>

        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>

Modal with footer and buttons

Open

Modal with footer and buttons

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

You can add c-modal__close class to button to envoke closing modal

Close Confirm

        {% include "@Components/button/button.twig" with {props: {
    title: "Open",
    data: {
      "modal-target": "modal-example-05"
    }
  }
} %}

{% embed "@Components/modal/modal.twig" with {props: {
  id: "modal-example-05",
  header: {
    title: "Modal with footer and buttons",
  },
  footer: {
    align: "right",
  }
  }} %}

  {% block content %}
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>You can add c-modal__close class to button to envoke closing modal</p>
  {% endblock %}

  {% block footer %}
    {% include "@Components/button/button.twig" with {props: {
      title: "Close",
      variant: "outline",
      extra_class: "c-modal__close",
    }} %}
    {% include "@Components/button/button.twig" with {props: {
      title: "Confirm",
    }} %}

  {% endblock %}
{% endembed %}

          <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#' data-modal-target="modal-example-05">
      <span class="btn__title u-z-index-1">
      Open
    </span>
      
  
  </a>

  <div class="c-modal   --hidden" id="modal-example-05">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

                  <header class="c-modal__header d-flex flex-column gap-1">
            <h2 class="u-h3 c-modal__heading">Modal with footer and buttons</h2>
                      </header>
        
        <div class="c-modal__body ">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
    <p>You can add c-modal__close class to button to envoke closing modal</p>
          </div>

                  <footer class="c-modal__footer d-flex flex-shrink-0 flex-wrap gap-2 align-items-center --right">
                <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline          c-modal__close" href='#'>
      <span class="btn__title u-z-index-1">
      Close
    </span>
      
  
  </a>
    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#'>
      <span class="btn__title u-z-index-1">
      Confirm
    </span>
      
  
  </a>

            </footer>
        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>

Open or close modal by javascript eventlisteners

          const modal = document.querySelector(".your-precious-modal")

modal?.dispatchEvent(new Event("open"))
modal?.dispatchEvent(new Event("close"))