example.html.twig

{% extends 'layout_modal.html.twig' %}
{% trans_default_domain 'front' %}

{% set attr = {
    'data-backdrop': 'static',
    'data-show': 'true'
} %}

{% block id 'ticket-feedback-modal' %}

{% block title 'support.title.feedback'|trans %}

{% block before_body form_start(feedbackForm) %}

{% block body %}
    <p>
        {{ 'support.text.feedback_introduction' | trans | nl2br }}
    </p>

    {{ form_row(feedbackForm.feedbackScore) }}
    {{ form_row(feedbackForm.feedbackComment) }}
    {{ form_rest(feedbackForm) }}
{% endblock %}

{% block footer %}
    <button type="submit" class="btn btn-success">{{ 'button.submit' | trans({}, 'global') }}</button>
    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{ 'button.close' | trans({}, 'global') }}</button>
{% endblock %}

{% block after_footer form_end(feedbackForm) %}

layout_modal.html.twig

{% set attr = attr|default([])|merge({
    class: ('modal fade '~attr.class|default('')|trim),
    id: block('id'),
    role: 'dialog',
    tabindex: -1,
}) %}

<div
    {% for attr_name,attr_value in attr %}
        {{ attr_name }}
        {%- if attr_value is not same as(true) -%}
            ="{{ attr_value }}"
        {%- endif -%}
    {% endfor %}
    >
    <div class="modal-dialog">
        {% include 'layout_modal_content.html.twig' %}
    </div>
</div>

layout_modal_content.html.twig

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">
            {% block title %}{% endblock %}
        </h4>
    </div>
    {% block before_body %}{% endblock %}
    <div class="modal-body">
        {% block body %}{% endblock %}
    </div>
    <div class="modal-footer">
        {% block footer %}{% endblock %}
    </div>
    {% block after_footer %}{% endblock %}
</div>