dsfr4drupal-1.x-dev/components/modal/modal.twig

{% set attributes = attributes|default(create_attribute()) %}
{% set button_label = button_label|default('Close'|t) %}
{% set button_title = button_title|default('Close'|t) %}
{% set concealing_backdrop = concealing_backdrop ?? true %}
{% set html_id = html_id|default('modal-default') %}
{% set html_tag = html_tag|default('dialog') %}
{% set title_attributes = title_attributes|default(create_attribute()) %}
{% set title_tag = title_tag|default('h1') %}

{% set col_attributes = create_attribute({'class': ['fr-col-12']}) %}
{% if size == 'lg' %}
  {% set col_attributes = col_attributes.addClass(['fr-col-md-10', 'fr-col-lg-8']) %}
{% elseif size == 'sm' %}
  {% set col_attributes = col_attributes.addClass(['fr-col-md-6', 'fr-col-lg-4']) %}
{% else %}
  {% set col_attributes = col_attributes.addClass(['fr-col-md-8', 'fr-col-lg-6']) %}
{% endif %}

{% if icon %}
  {% set title_attributes = title_attributes.addClass('fr-icon-' ~ icon) %}

  {% if icon_size and icon_size != 'md' %}
    {% set title_attributes = title_attributes.addClass('fr-icon--' ~ icon_size) %}
  {% endif %}
{% endif %}

<{{ html_tag }}{{ attributes.setAttribute('id', html_id).setAttribute('role', 'dialog').setAttribute('aria-labelledby', html_id ~ '-title').addClass('fr-modal').setAttribute('data-fr-concealing-backdrop', concealing_backdrop ? 'true' : 'false') }}>
  <div class="fr-container fr-container--fluid fr-container-md">
    <div class="fr-grid-row fr-grid-row--center">
      <div{{ col_attributes }}>
        <div class="fr-modal__body">
          <div class="fr-modal__header">
            <button type="button" class="fr-btn--close fr-btn" aria-controls="{{ html_id }}" title="{{ button_title }}">
              {{ button_label }}
            </button>
          </div>
          <div class="fr-modal__content">
            <{{ title_tag }}{{ title_attributes.setAttribute('id', html_id ~ '-title').addClass('fr-modal__title') }}>
              {{ title }}
            </{{ title_tag }}>
            {% block modal_content %}
              [[MODAL CONTENT SLOT]]
            {% endblock modal_content %}
          </div>

          {% if block('modal_footer')|trim %}
            <div class="fr-modal__footer">
              {% block modal_footer %}{% endblock modal_footer %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</{{ html_tag }}>