I was searching for a nice and clean way to show a customizable popup message.
After some research I found the Alertify.js JavaScript libary. Although the developer hompage offers some great examples, I couldn’t find out how to integrate the JavaScript file into my homepage. After hours and hours of trying I finally got it working:
1.Downloading alertify.js
Download the full alertify.js package HERE and extract the content.
2.Uploading alertify.js and CSS styles
Upload the following files from the extracted folder to your server:
- alertify.js-0.3.9\src\alertify.js
- alertify.js-0.3.9\themes\alertify.core.css
- alertify.js-0.3.9\themes\alertify.default.css
3.Integrating alertify.js and CSS styles
Open your functions.php file and insert the following lines:
// Include alertify.js script and css
function alertifyJs()
{
wp_enqueue_script('alertifyJsScript', 'PATH-TO-ALERTIFY-JS',array('jquery'),'1.0',true);
wp_enqueue_style('alertify-core-style', 'PATH-TO-ALERTIFY-CORE-CSS', false, '1.0');
wp_enqueue_style('alertify-default-style', 'PATH-TO-ALERTIY-DEFAULT-CSS', false, '1.0');
}
add_action('wp_enqueue_scripts','alertifyJs');
You just have to edit the:
- PATH-TO-ALERTIFY-JS
- PATH-TO-ALERTIFY-CORE-CSS
- PATH-TO-ALERTIY-DEFAULT-CSS
to the paths where you previously uploaded the files on your server.
If you’re not using WordPress you have to find antother way to include those files. A simple way ist to add the following lines to your homepage header:
<script type="text/javascript" src="PATH-TO-ALERTIFY-JS"></script> <link rel="stylesheet" type="text/css" href="PATH-TO-ALERTIFY-CORE-CSS"> <link rel="stylesheet" type="text/css" href="PATH-TO-ALERTIFY-DEFAULT-CSS">
4.Setting up alertify.js
Now you can insert the alertify functions from the authors homepage for example:
// alert dialog
alertify.alert("Message");