32 lines
1.5 KiB
HTML
32 lines
1.5 KiB
HTML
{% comment %}
|
|
|
|
Bootstrap Modal, https://getbootstrap.com/docs/5.1/components/modal/
|
|
|
|
E.G. --> {% include feature/modal.html button="More Info" color="info" title="Information" text="Example text" %}
|
|
|
|
Options:
|
|
- "button" = text of button to trigger modal
|
|
- "color" = color of modal button (primary, secondary, success, danger, warning, info, light, dark)
|
|
- "title" = header text for modal pop up
|
|
- "text" = body text for modal pop up, can use markdown formatting (tip: use a Liquid capture to add more complex content)
|
|
|
|
{%- endcomment -%}
|
|
<!-- Button trigger modal -->
|
|
<p class="text-center mb-3">
|
|
<button type="button" class="btn btn-{{ include.color | default: 'primary' }}" data-bs-toggle="modal" data-bs-target="#{{ include.button | slugify }}Modal">{{ include.button }}</button>
|
|
</p>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="{{ include.button | slugify }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ include.button | slugify }}ModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title" id="{{ include.button | slugify }}ModalLabel">{{ include.title }}</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" >
|
|
{{ include.text | markdownify }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|