control modal open state with class toggle

[ph-poppe]

Is your feature request related to a problem? Please describe.

It would be nice to be able to control a modal's visibility based on a class toggle. Now it uses a link to make the modal visible. But when you want to make a modal visible after a callback, it is harder to accomplish.

Describe the solution you'd like

• adding a class to the modal as active / visible
• when you want to show: add class 'active' or 'visible'
• when you want to hide: remove the class

[nalin]

+1 would love to be able to control the modal with JS and this method would work.

[Spiderpig86]

Hey all, to follow up I have added support for toggling modals using a new class called modal--visible.

You can paste this example into Cirrus Playgrounds to try it out:

<script>
	function toggleModal() {
        document.querySelector("#test-modal").classList.toggle("modal--visible");
    }
</script>

<div class="modal modal-animated--zoom-in" id="test-modal">
	<div class="modal-content" role="document">
		<div class="modal-header"><a onclick="toggleModal()" class="u-pull-right"
				aria-label="Close"><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-wrapper w-80p" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg></span></a>
			<div class="modal-title">Modal Dialog</div>
		</div>
		<div class="modal-body">
			<h4>How to use.</h4>
			<p>Insert anything you want inside this modal dialog.</p>
			<h4>What is Lorem Ipsum?</h4>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
				industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
				and scrambled it to make a type specimen book.</p>
			<h4>Ipsum</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
				et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
				aliquip ex ea commodo consequat.</p>
			<h4>Ipsum II</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
				et dolore magna aliqua. Sit amet luctus venenatis lectus magna. Facilisis gravida neque convallis a
				cras semper. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Erat imperdiet sed
				euismod nisi porta lorem.
			</p>
		</div>
		<div class="modal-footer u-text-right"><a onclick="toggleModal()"
				class="u-inline-block"><button class="btn--sm">Cancel</button></a><a onclick="toggleModal()"
				class="u-inline-block"><button class="btn-primary btn--sm">Share</button></a></div>
	</div>
</div>

<div class="u-center h-100p">
	<button id="button" class="btn-info" onclick="toggleModal()">Open Modal</button>
</div>