Skip to content

Instantly share code, notes, and snippets.

@faizanakram99

faizanakram99/DialogPopover.html.twig

Created September 11, 2024 00:09
Show Gist options
  • Save faizanakram99/bac0e06f7dd42f3ca5b89de744f5435a to your computer and use it in GitHub Desktop.
Save faizanakram99/bac0e06f7dd42f3ca5b89de744f5435a to your computer and use it in GitHub Desktop.
Download ZIP
Lightbox (popver) twig component
Raw
DialogPopover.html.twig
<div popover id="{{ id }}" {{ attributes.defaults({class: 'pop-over dialog-popover'}) }}>
<div class="md-card h-100">
{% block dialog_header %}
<div class="card-header">{{ title|trans|capitalize }}
<button type="button" class="icon-button" popovertargetaction="hide"
popovertarget="{{ id }}">
<span class="icon icon-cancel"></span>
</button>
</div>
{% endblock %}
{% block content %}
{% endblock %}
</div>
</div>
Raw
example-usages.html.twig
{# Example 1: open iframe in popover lazily #}
<button type="button" class="md-button text-button" popovertarget="open-iframe">
open iframe in popover
</button>
<twig:DialogPopover id="open-iframe" title="Lazy iframe">
<iframe src="{{ path('some_path'}) }}" loading="lazy"></iframe>
{# loading="lazy" attribtue does the trick, the iframe will be loaded when popover opens #}
</twig:DialogPopover>
{# Example 2: Showing confirmation upon delete #}
<twig:DialogPopover id="delete-contract" title="confirm.deletion">
<div class="columns gap-sm flex-center w-100">
<form action="{{ path('delete_contract', {id: contractId}) }}" method="POST" class="w-100">
<div class="columns flex-center gap-md w-100">
<button type="submit" class="md-button bg-danger outlined-button" >
<span class="icon icon-confirm"></span> {{ 'Yes'|trans }}
</button>
<button type="button" class="md-button outlined-button" popovertargetaction="hide"
popovertarget="delete-contract">
<span class="icon icon-cancel"></span> {{ 'No'|trans }}
</button>
</div>
</form>
</div>
</twig:DialogPopover>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment