Message Pop!
Message pop is a free plug-in written in pure javascript and leverages FontAwesome to create a simple to use and clean messaging system. No jQuery required!!!
Download the latest release now
Released under the MIT License. Source on Github (changelog). Compatible with: FontAwesome 4.2.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 10+
Installation
Download MessagePop! add the .css and .js files to your project and reference the following files in the header of your website
<head>
// CSS Files
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/msgPop.css" />
// JS Files
<script language="javascript" type="text/javascript" src="js/msgPop.js"></script>
</head>
// CSS Files
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/msgPop.css" />
// JS Files
<script language="javascript" type="text/javascript" src="js/msgPop.js"></script>
</head>
Usage
Open a simple message
<script>
// Examples:
// Display a message for a successful transaction
MsgPop.closeAll();
MsgPop.open({
Type:"success",
Content:"Your transaction was a success!"
});
</script>
// Examples:
// Display a message for a successful transaction
MsgPop.closeAll();
MsgPop.open({
Type:"success",
Content:"Your transaction was a success!"
});
</script>
Playing with switches
<script>
// Examples:
// Display a message for a successful transaction
MsgPop.closeAll();
MsgPop.open({
Type:"message",
Content:"You have to click the close button",
AutoClose:false,
ClickAnyClose:false
});
</script>
// Examples:
// Display a message for a successful transaction
MsgPop.closeAll();
MsgPop.open({
Type:"message",
Content:"You have to click the close button",
AutoClose:false,
ClickAnyClose:false
});
</script>
Setting global switches and hooks
<script>
// Examples:
// Display a message across the top of the screen
MsgPop.closeAll(); // Removes messages and resets MsgPop object
MsgPop.displaySmall = false; // Global switch that makes messages full screen
MsgPop.open({
Type:"error",
Content:"Your transaction failed! Here is the big message to prove it!",
AfterClose:function(){
MsgPop.displaySmall = true;
}
});
</script>
// Examples:
// Display a message across the top of the screen
MsgPop.closeAll(); // Removes messages and resets MsgPop object
MsgPop.displaySmall = false; // Global switch that makes messages full screen
MsgPop.open({
Type:"error",
Content:"Your transaction failed! Here is the big message to prove it!",
AfterClose:function(){
MsgPop.displaySmall = true;
}
});
</script>
Anchor messages
<script>
// Examples:
// Display attach a message to a specific element.
MsgPop.closeAll(); // Removes messages and resets MsgPop object
MsgPop.open({
Type:"error",
Content:"Invalid input! Numbers only please.",
AnchorTo:"ZipCodeTxt",
AutoClose:false
HideCloseBtn:true
});
</script>
// Examples:
// Display attach a message to a specific element.
MsgPop.closeAll(); // Removes messages and resets MsgPop object
MsgPop.open({
Type:"error",
Content:"Invalid input! Numbers only please.",
AnchorTo:"ZipCodeTxt",
AutoClose:false
HideCloseBtn:true
});
</script>
Change Message Position
<script>
// Examples:
// Display attach a message to a specific element.
MsgPop.closeAll(); // Removes messages and resets MsgPop object
MsgPop.position = "top-left"; // Sets the position of non anchored messages.
MsgPop.open({
Type:"message",
Content:"I'm in the top left corner!",
AutoClose:false
});
</script>
// Examples:
// Display attach a message to a specific element.
MsgPop.closeAll(); // Removes messages and resets MsgPop object
MsgPop.position = "top-left"; // Sets the position of non anchored messages.
MsgPop.open({
Type:"message",
Content:"I'm in the top left corner!",
AutoClose:false
});
</script>
AJAX & JSON
Initialize MsgPopLive and setup demo
<script>
// Examples:
// Setting up demo function to show how MsgPop.live() works
function liveDemo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
if (this.readyState == 4 && this.status == 200)
{
MsgPop.closeAll();
var obj = JSON.parse(this.responseText);
for (i = 0; i < obj.MsgPopQueue.length; i++) {
MsgPop.open(obj.MsgPopQueue[i]);
}
document.getElementById('liveDemo').innerHTML = obj.content;
}
};
xhttp.open("GET", "json/liveDemo.json", true); xhttp.send();
}
</script>
// Examples:
// Setting up demo function to show how MsgPop.live() works
function liveDemo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
if (this.readyState == 4 && this.status == 200)
{
MsgPop.closeAll();
var obj = JSON.parse(this.responseText);
for (i = 0; i < obj.MsgPopQueue.length; i++) {
MsgPop.open(obj.MsgPopQueue[i]);
}
document.getElementById('liveDemo').innerHTML = obj.content;
}
};
xhttp.open("GET", "json/liveDemo.json", true); xhttp.send();
}
</script>
JSON Return Object
{
"MsgPopQueue":[
{"Type":"success","Content":"JSON WORKED!","AutoClose":false},
{"Type":"message","Content":"You can send back multiple messages if needed!", "AutoClose":false}
],
"content": "<div>This is new <b>text!</b></div>"
}
"MsgPopQueue":[
{"Type":"success","Content":"JSON WORKED!","AutoClose":false},
{"Type":"message","Content":"You can send back multiple messages if needed!", "AutoClose":false}
],
"content": "<div>This is new <b>text!</b></div>"
}
Global Settings
| Property | Default | Description |
|---|---|---|
| displaySmall | True | This global setting will toggle full screen messages or small. |
| limit | 4 | This global setting for number of messages to display before showing the "Load More" button |
| effectSpeed | 350 | Number of milliseconds all animated effects take to complete. |
| position | "top-right" |
Use this option in conjunction with "displaySmall." Valid options include the following.
|
Message Settings
| Property | Default | Description |
|---|---|---|
| Type | "message" | ("message" : "success" : "warning" : "error") |
| Content | null | Content you would like to load into the message. Accepts HTML. |
| AutoClose | true | (true : false) -- false: user will have to click either the message or close button in order to close the message. |
| CloseTimer | 7000 | Number of milliseconds before the message closes. This must be used in conjunction with AutoClose. |
| ClickAnyClose | true | (true : false) When set to false the user will be forced to click the close button in order to close the message. |
| HideCloseBtn | false | (true : false) show / hide close button |
| ShowIcon | true | (true : false) show / hide icon |
| Icon | auto | Example: Icon: "<i class="fa fa-bicycle"></i>" Displays: |
| MsgID | Auto | This will allow a user to set the "id" attribute of the message. This is especially helpful when chaining events later that need to access a paticular message. |
| ShowIcon | true | (true : false) Show / hide message icon left of the content |
| CssClass | null | Allows the user to add additional classes to a message |
| AnchorTo | null | ("TextID") Allows the user to anchor a message to a specific element by id. |
Callbacks
| Property | Default | Description |
|---|---|---|
| BeforeOpen | null | Callback fires before message opens |
| AfterOpen | null | Callback fires after message opens |
| BeforeClose | null | Callback fires before message closes |
| AfterClosed | null | Callback fires after message closes |