Modals

Updated on pzplUI 1.5

Example Modal

<div class="modal text-dark" id="myModal">
	<div class="modal-content">
		<div class="modal-header consended">
			<h5 class="modal-title">Modal title</h5>
		</div>
		<div class="modal-body">
			<p>Woohoo, you're reading this text in a modal!</p>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary">Close</button>
			<button type="button" class="btn btn-normal">Save changes</button>
		</div>
	</div>
</div>

Using the JS Plugin

pzplUI incudes a JS plugin for handling modals. It can:

• Save modals into a variable
• Show modals
• Hide modals
• Handle payloads

First, save the modal into the variable:

 let modalElement = $pzplui_modal.init("#myModal"); 

Now you can use

modalElement.show();

to show your modal.

In order to hide the modal, use

modalElement.hide(payload);

Replace payload with the message you want to be carried.

For example, the Close button can carry the "notSaved" payload, while the Save button
can carry the "saved" payload. If you want to carry no payload, replace payload with undefined.

Not using the JS plugin

You can write some JS code to handle showing and hiding the modal pretty easly. Simply,

Make a function that will set the display property to block, and a function that will set it back to none

Some example code:

function showModal() {
	document.querySelector("#myModal").style.display = "block";
};    

function hideModal() {
	document.querySelector("#myModal").style.display = "none";
};