Framework Component Library

Modal: Backdrop Click to Close 

<div class="fw-container">
    <!-- Modal -->

    <button class="button-bordered
 				" data-js-modal-trigger="modal-3">
        <span class="button-bordered__inner"> <span class="button-bordered__label">Open Dialog (Backdrop Close)</span>
        </span>
    </button>
    <dialog class="modal" id="modal-3" data-js-modal='{"closeOnBackdropClick":true}' aria-labelledby="modal-3__title">
        <div class="modal__inner">
            <div class="modal__header">
                <h2 class="modal__title" id="modal-3__title">
                    Dialog
                </h2>

                <button class="button-bordered
 				" data-js-modal-close="" autofocus="">
                    <span class="button-bordered__inner"> <span class="button-bordered__label">Close</span>
                        <span class="button-bordered__icon" aria-hidden="true"><svg class="icon icon--close">
                                <use href="/images/icons.svg?1.0.0#close" />
                            </svg></span>
                    </span>
                </button>
            </div>
            <div class="modal__content typography">
                <p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>
            </div>
        </div>
    </dialog>
    <!-- END: Modal -->

</div>
 
{% set id = id|default(uniqid('modal')) %}

<div class="fw-container">
	<!-- Modal -->
	{% include '@partial-button' with {
		classes: {
			base: 'button-bordered'
		},
		attributes: {
			'data-js-modal-trigger': id,
		},
		title: trigger_label|default('Open')
	} only %}
	<dialog
		class="modal"
		id="{{ id }}"
		data-js-modal{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
		aria-labelledby="{{ id ~ '__title' }}"
	>
		<div class="modal__inner">
			<div class="modal__header">
				<h2 class="modal__title" id="{{ id ~ '__title' }}">
					Dialog
				</h2>
				{% include '@partial-button' with {
					classes: {
						base: 'button-bordered'
					},
					attributes: {
						'data-js-modal-close': '',
						'autofocus': '',
					},
					title: 'Close',
					icon: 'close'
				} only %}
			</div>
			<div class="modal__content typography">
				{{ content }}
			</div>
		</div>
	</dialog>
	<!-- END: Modal -->

</div>

No notes defined.