jquery-popmessage

jQuery plugin for popping messages on webpages (needs CSS3 compatibility)

Create pop message

<div class="pop">
    <div class="pop-body">
        This is a pop message
    </div>
</div>

Add a bold title

<div class="pop">
    <div class="pop-title">
        Pop title
    </div>
    <div class="pop-body">
        This is a pop message with a title.
    </div>
</div>

Formatting

By default, the pop message is not formatted and is black on gray.

Therefore, there are several predefined formats for colors and designs:

• success : a light green message for an operation success.
• danger : a light red message for an error message.
• warning : a yellow message for a warning information.
• info : a light blue message to display an information message.

Usage

<div class="pop pop-success">...</div>
<div class="pop pop-danger">...</div>
<div class="pop pop-warning">...</div>
<div class="pop pop-info">...</div>

Include icon

You can include an icon or an image element at the left of the popped message. You must add a div with pop-icon class at the beginning of the pop message content.

Usage

<div class="pop pop-info">
    <div class="pop-icon">
        <img src="mon-popicon.png" alt="PopIcon" />
    </div>
    ...
</div>

By default, pop icons as img are limited to 64x64 pixels. You can override this behaviour specifying width and height in img attributes.

Position

Six predefined positions:

• top-left
• top-right
• bottom-left
• bottom-right
• top-wide (Takes all the document width at the top)
• bottom-wide (Takes all the document width at the bottom)

<div class="pop pop-top-left">...</div>
<div class="pop pop-top-right">...</div>
<div class="pop pop-bottom-left">...</div>
<div class="pop pop-bottom-right">...</div>
<div class="pop pop-top-wide">...</div>
<div class="pop pop-bottom-wide">...</div>

Customization

Duration

<!-- 500 milliseconds -->
<div class="pop" data-pop-delay="500">...</div>
<!-- 10 seconds -->
<div class="pop" data-pop-delay="10000">...</div>
<!-- Infinite, must be closed or hidden manually -->
<div class="pop" data-pop-delay="0">...</div>

Fade in/out effect duration

<!-- Fade in 400 ms -->
<div class="pop" data-pop-fade-in="400">...</div>
<!-- Fade out 500 ms -->
<div class="pop" data-pop-fade-out="500">...</div>
<!-- Fade in 300 and Fade out 900 -->
<div class="pop" data-pop-fade-in="300" data-pop-fade-out="900">...</div>

Insert message in another element

You must add the pop-container class to the container:

<div id="container" class="pop-container">
	<div class="pop pop-top-wide">...</div>
</div>

Pop the message

Only with HTML

<div id="idPop" class="pop pop-top-wide">...</div>
<button data-trigger="pop" data-pop-id="idPop">Pop !</button>

Customization options are also available on trigger element :

<!-- This button will pop #myPop pop message which will not automatically hide. -->
<button data-trigger="pop" data-pop-delay="0" data-pop-fade-in="300" data-id="myPop">Pop !</button>

You can also pop all messages by a class with the data-pop-class attribute :

<!-- This button will pop all pop messages in the HTML document -->
<button data-trigger="pop" data-pop-delay="0" data-pop-class="pop">Pop!</button>

You can specify a container if the pop can be displayed in different elements :

<button data-trigger="pop" data-pop-id="myPop" data-pop-container="containerid">Pop!</button>

Note: Bottom side popmessages will not correctly work if they are used into containers. You can add your custom CSS into the css option.

With jQuery

// Options is an **object**
$("#myButton").on('click', function() {
    $("#myPop").pop("show", {
		fadeIn: 500,
		fadeOut: 500,
		delay: 4000,
		side: 'top-wide',
		css: {},
		closable: true
	});
});

Option	Type	Default	Effect
fadeIn	integer	500	jQuery fadeIn effect speed.
fadeOut	integer	500	jQuery fadeOut effect speed.
delay	integer	4000	Time in milliseconds of pop message duration.
side	string	undefined	Redefine position with top-left, top-right, bottom-left, bottom-right, top-wide, or bottom-wide.
css	object	{}	Additional CSS as a JavaScript object passed to css jQuery function.
closable	boolean	true	true if you want the close button, false otherwise.
container	string	undefined	Pop message parent ID attribute if you don't want to pop on the whole browser window.

Events

Event name	When it triggered
pop.show	Triggered when showing process starts
pop.shown	Triggered when showing process is finished
pop.hide	Triggered when hiding process starts
pop.hidden	Triggered when hiding process is finished

You can bind these events with the on jQuery method as you do with other jQuery events.

$("#myPop").on('pop.shown', function() {
  /* Do something here */
});