Modal

Download it now

Classes
- Modal - The parent class
- Modal.Notify - Easy user notifications
- Modal.Confirm - Are you sure?
- Modal.Image - pop-up images, please!
Examples
- Code Examples
- Modal Examples

Modal

The Base class

Modal is the parent to all the other modal classes, it handles all the gritty show, hide, toggle, etc functionality that is expected of a modal window. The reason for most of the function returning self, is for easy chaining of function calls.

The funtions are:

new Modal(options)
show(modal) -> modal
hide(modal) -> modal
toggle(modal) -> modal
isShowing(modal) -> bool
center(modal) -> modal
update(modal, content) -> modal
ajaxUpdate(modal, url, parameters) -> modal
setTitle(modal, title) -> modal
kill(modal) -> void

The options are:

option	Explanation
id	The id of the modal window div. defaults to 'modal'. Has to be unique for each modal on page
overlayId	The id of the overlay div. defaults to 'overlay'. Has to be unique for each modal on page
className	the css class-name of the modal window. defaults to 'modal'
overlay	if the modal should have a overlay over the rest of the page when it's showing.defaults to true
width	default width of the modal window. defaults to 'auto'
height	default width of the modal window. defaults to 'auto'
title	The default title of the modal window. defaults to ''
overlayColor	the color of the overlay as string representing a hexadecimal number. defaults to '#000000'
overlayOpacity	the opacity of the overlay as a floating point number between 0 and 1. defaults to 0.85
closeOnOverlay	hide the modal when the user clicks the overlay?defaults to true
effect	what effect to run when showing/hiding the modal. can be 'appear' \| 'blind' \| 'slide' \| 'none'. defaults to 'appear'
effectDuration	how long the show/hide effect will run in seconds. defaults to 0.5
vertical	vertical alignment of the modal-window. Can be 'top' \| 'center' \| 'bottom'. defaults to 'center'

Modal.Notify

Easy user notifications

What just happened?

Modal.Notify() inherits all the functions and options from Modal() (prototype.js' class functions are awesome) and adds a few options of it's own.

The functions are:

Modal.Notify.setIcon(modal, icon) -> modal.notify
Modal.Notify.setNotification(modal, notification) -> modal.notify

The options are:

Option	Explanation
notification	The notification to be displayed to the user (e.g "The action executed successfully!").
okText	The text on the "ok button" (the button that closes the box and confirms that the user has seen the notification). Defaults to "OK"
iconURL	if you want to use a icon to convey your message, this is the option to use.

Modal.Confirm

Are you sure?

show me the example

The confirm modal is an unobtrusive way to make sure a user really wants to execute a action. Like the other classes the confirmation modal inherits all the options and functions from Modal(), and here is what it brings to the table

Well, it has no functions specific to itself, but it does have some options

Option	Explanation
confirmText	The confirmation text to be displayed to the user
yesTitle	The text to be displayed on the "yes button" (or positive action button)
noTitle	The text to be displayed on the "no button" (or negative action button)
onYes	callback function to be run if the user presses the "yes button"
onNo	callback function to be run if the user presses the "no button"

Modal.Image

popup images, please!

Examplify it!

It's not meant to be as fancy as the lightboxes out there, just to work without that many glitches.. you an select access keys work and you can allow warp around