Introduction

A little bit about the plugin

Prowl is a lightweight yet highly customizable jQuery modal plugin which lets you create animated, fully responsive, nice clean modal windows on your desktop & mobile webpages.

Acting as a modal framework and event handler, modal structures do not have a definitive markup structure resulting in a straightforward implementation on any website.

Try out the basic modal

Setup

Installation and setup

Download the latest distribution files from the repo.

Include the CSS files in the head of your page (prowl.css is required unless you know what you're doing):

										<link rel="stylesheet" href="/dist/prowl.css">
<link rel="stylesheet" href="/dist/prowl_theme.css">
									

Include the JS file just before </body>:

										<script src="/dist/prowl.js"></script>
									

Structure a basic modal with HTML:

										<a class="open" data-prowl-target="example">Open the modal</a>
<div class="prowl">
	<div class="prowl-overlay">
		<div class="prowl-modal" data-prowl-id="example">
			<h2>It's a modal!</h2>
			<div class="button toggle">Close</div>
		</div>
	</div>
</div>
									

Multiple modals can also be created, just point the target of the toggle to the id of the modal:

										<a class="open" data-prowl-target="modal-one">Open first modal</a>
<a class="open" data-prowl-target="modal-two">Open second modal</a>
<div class="prowl">
	<div class="prowl-overlay">
		<div class="prowl-modal" data-prowl-id="modal-one">
			...
		</div>
		<div class="prowl-modal" data-prowl-id="modal-two">
			...
		</div>
	</div>
</div>
									

Initiate the modal by using the class used for the toggle and pass an options object if needed:

										$('.open').prowl(options) //We used the .open class in the modal markup
									
Re-initiate Prowl, as above, when toggles are added dynamically to register event bindings on the new element.

Options

Available & default options for the Prowl object

Options can be altered to customize Prowl:


containerClass

The element class of the container holding the modal structure.

										Default: ".prowl"
									
toggleClass

Add what class name will be appended to the toggle element on state change.

										Default: ".prowl-toggle"
									
overlayClass

The element class of the overlay of the modal.

										Default: ".prowl-overlay"
									
modalClass

The element class of the modal itself.

										Default: ".prowl-modal"
									
background

Override the color of the overlay background, formatted in hex, rgba or rgb.

										Default: "rgba(149, 155, 160, 0.57)"
									
animate

Animation of how the modal opens and closes. Options are fade, reveal, swash and drop.

										Default: "fade"
									
duration

The speed of the animation in ms.

										Default: 200
									
closeOnEscape

If set to true, the modal closes when the escape key is pressed.

										Default: true
									
state

Override the initial state of the modal. Options are open, closed.

										Default: "closed"
									

Methods

Types of methods exposed

Assign the instance to a variable and use the exposed methods as defined below:

										let inst = $('.open').prowl()
									
open()

Manually opens the modal.

										inst.open()
									
close()

Manually closes the modal.

										inst.close()
									
getState()

Gets the current state of the modal. Returns opened/opening/closed/closing

										inst.getState()
									
toggle()

Toggles the current state [open/closed] of the modal.

										inst.toggle()
									
validColor(color)

Pass a color and check if it is valid for the overlay background. Returns a boolean.

										inst.validColor("#f2f4f8")
									

Events

Perform actions when events are triggered

Assign functions to triggered events on state transitions by passing the custom function to the Prowl object.


onOpen

Calls the custom function when the modal opens.

										let inst = $('.click').prowl({
	onOpen: () => {
		console.log('Modal has opened')
	}
})
									
onClose

Calls the custom function when the modal closes.

										let inst = $('.click').prowl({
	onClose: () => {
		console.log('Modal has closed')
	}
})
									
onOpening

Calls the custom function when the modal is opening (the time between the trigger to the time the animation finishes).

										let inst = $('.click').prowl({
	onOpening: () => {
		console.log('Modal is opening')
	}
})
									
onClosing

Calls the custom function when the modal is closing (the time between the trigger to the time the animation finishes).

										let inst = $('.click').prowl({
	onClosing: () => {
		console.log('Modal is closing')
	}
})
									
close

What is Prowl JS?

Well you're looking at it. Prowl is a jQuery plugin which enables an extensively customisable modal to be implemented on any site.

It takes a few minutes to setup, here's the link to the CDN.

What is Prowl JS?2

Well you're looking at it. Prowl is a jQuery plugin which enables an extensively customisable modal to be implemented on any site.

It takes a few minutes to setup, here's the link to the CDN.