<!-- Button trigger modal -->
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolorum, esse. Cupiditate nobis quaerat magni facere provident asperiores soluta dolorem recusandae, quae itaque id quos. Cupiditate eveniet modi rem, illum repudiandae minus fuga consequuntur soluta natus quae, reiciendis dignissimos quis quibusdam! Obcaecati vel corrupti quod repellat consequatur, et alias nisi, odit est porro debitis fugit autem consectetur ducimus nemo molestiae qui sapiente consequuntur dolor veritatis repudiandae magni. Dignissimos dolorem pariatur optio qui dolore eligendi provident?
</div>
<div class="modal-footer">
<a href="#" title="Fermer link to somewhere" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</a>
<a href="#" title="Sauvegarder link to somewhere" class="btn btn-dark">Sauvegarder</a>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
{% if title -%}
<h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
{%- endif %}
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
{{ text }}
</div>
{%- if footer -%}
<div class="modal-footer">
{% for button in footer.secondary.buttons -%}
{%- render '@button--secondary', button, true -%}
{%- endfor -%}
{% for button in footer.primary.buttons -%}
{%- render '@button--default', button, true -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}
</div>
</div>
{
"title": "Modal title",
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, dolorum, esse. Cupiditate nobis quaerat magni facere provident asperiores soluta dolorem recusandae, quae itaque id quos. Cupiditate eveniet modi rem, illum repudiandae minus fuga consequuntur soluta natus quae, reiciendis dignissimos quis quibusdam! Obcaecati vel corrupti quod repellat consequatur, et alias nisi, odit est porro debitis fugit autem consectetur ducimus nemo molestiae qui sapiente consequuntur dolor veritatis repudiandae magni. Dignissimos dolorem pariatur optio qui dolore eligendi provident?",
"footer": {
"secondary": {
"buttons": [
{
"text": "Fermer",
"attributes": {
"data-bs-dismiss": "modal"
}
}
]
},
"primary": {
"buttons": [
{
"text": "Sauvegarder"
}
]
}
}
}
No notes defined.