file bootstrap-modal.html.twig

Default theme implementation to display a Bootstrap Modal component.

Available variables:

  • attributes: Attributes for the outer modal div.
  • body: The body of the modal.
  • body_attributes: Attributes for the modal body div.
  • close_button: Flag indicating whether or not to show the close button in the header.
  • content_attributes: Attributes for the modal content div.
  • description: (optional) A list of description properties containing:
    • content: (optional) A description of the modal, may not be set.
    • attributes: (optional) A list of HTML attributes to apply to the modal description div. Will only be set when description is set.
    • position: (optional) A display setting that can have these values:
      • before: The description is displayed before the body. This is the default value.
      • after: The description is display after the body.
      • invisible: The description is displayed after the element, hidden visually but available to screen readers.
  • dialog_attributes: Attributes for the inner modal div.
  • footer: The footer of the modal.
  • footer_attributes: Attributes for the modal footer div.
  • header_attributes: Attributes for the modal header div.
  • size: The size of the modal. Can be empty, "modal-sm" or "modal-lg".
  • title: The title for the modal.
  • title_attributes: Attributes for the modal title.
Source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a Bootstrap Modal component.
  5. *
  6. * Available variables:
  7. * - attributes: Attributes for the outer modal div.
  8. * - body: The body of the modal.
  9. * - body_attributes: Attributes for the modal body div.
  10. * - close_button: Flag indicating whether or not to show the close button in
  11. * the header.
  12. * - content_attributes: Attributes for the modal content div.
  13. * - description: (optional) A list of description properties containing:
  14. * - content: (optional) A description of the modal, may not be set.
  15. * - attributes: (optional) A list of HTML attributes to apply to the
  16. * modal description div. Will only be set when description is set.
  17. * - position: (optional) A display setting that can have these values:
  18. * - before: The description is displayed before the body. This is the
  19. * default value.
  20. * - after: The description is display after the body.
  21. * - invisible: The description is displayed after the element, hidden
  22. * visually but available to screen readers.
  23. * - dialog_attributes: Attributes for the inner modal div.
  24. * - footer: The footer of the modal.
  25. * - footer_attributes: Attributes for the modal footer div.
  26. * - header_attributes: Attributes for the modal header div.
  27. * - size: The size of the modal. Can be empty, "modal-sm" or "modal-lg".
  28. * - title: The title for the modal.
  29. * - title_attributes: Attributes for the modal title.
  30. *
  31. * @ingroup templates
  32. */
  33. #}
  34. {% if theme.settings.modal_enabled %}
  35. {{ attach_library('bootstrap/modal') }}
  36. {%
  37. set classes = [
  38. 'modal',
  39. theme.settings.modal_animation ? 'fade',
  40. ]
  41. %}
  42. <div{{ attributes.addClass(classes) }} tabindex="-1" role="dialog">
  43. {%
  44. set dialog_classes = [
  45. 'modal-dialog',
  46. size ? size|clean_class,
  47. ]
  48. -%}
  49. <div{{ dialog_attributes.addClass(dialog_classes) }} role="document">
  50. {% set content_classes = ['modal-content'] -%}
  51. <div{{ content_attributes.addClass(content_classes) }}>
  52. {% if title -%}
  53. {% block title -%}
  54. {% set header_classes = ['modal-header'] -%}
  55. {% set title_classes = ['modal-title'] -%}
  56. <div{{ header_attributes.addClass(header_classes) }}>
  57. {% if close_button -%}
  58. <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'Close'|t }}"><span aria-hidden="true">&times;</span></button>
  59. {% endif -%}
  60. <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
  61. </div>
  62. {% endblock -%}
  63. {% endif -%}
  64. {% block body -%}
  65. {% set body_classes = ['modal-body'] -%}
  66. {%
  67. set description_classes = [
  68. 'help-block',
  69. description and description.position == 'invisible' ? 'sr-only',
  70. ]
  71. %}
  72. <div{{ body_attributes.addClass(body_classes) }}>
  73. {% if description and description.position == 'before' %}
  74. <p{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</p>
  75. {% endif %}
  76. {{ body }}
  77. {% if description and description.position == 'after' or description.position == 'invisible' %}
  78. <p{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</p>
  79. {% endif %}
  80. </div>
  81. {% endblock -%}
  82. {% if footer is not empty -%}
  83. {% block footer -%}
  84. {% set footer_classes = ['modal-footer'] -%}
  85. <div{{ footer_attributes.addClass(footer_classes) }}>
  86. {{ footer }}
  87. </div>
  88. {% endblock -%}
  89. {% endif -%}
  90. </div>
  91. </div>
  92. </div>
  93. {% endif %}

Related topics