MsgPop Demos
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>
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>"
}