CODE

Convert Browser Alerts to Inline Notifications

This little script intercepts any annoying browser alerts and converts them to nice, unobtrusive notification overlays.

Adam Wilson's:
CODE Items Profile

v1.0.0

1. This is particularly handy with eCommerce implementations where there are many default alerts (for things like adding products to the cart), which are super annoying and need to be clicked by the user to dismiss them.

   With this script and some simple styles, these messages will simply display in a neat floating box that will dismiss itself in a few seconds.

   You can copy the below code directly into the bottom of your page template/s, or into a snippet/include if that’s how you like to roll. You could even move the CSS into your stylesheet and the Javascript into your script file - it should work fine either way.

   Adjust or add to the styles to suit your site and you’re all set.

   Note: This script requires jQuery to be loaded on your site.

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <style>
       #alertbox {
           width:100%;
           display:none;
           position:fixed;
           top:100px;
           z-index:9999;
           text-align:center;
           pointer-events: none;
       }
       #alertbox .alertmsg {
           max-width:300px;
           background: lightblue;
           margin: 0 auto;
           padding: 14px 18px;
           pointer-events: none;
       }
   </style>
   <script>
       // ON PAGE ALERT MESSAGES
       window.alert = function (message) {
           $('#alertbox').finish().remove();                                                                                   // instantly completes any existing animation queued on the alert box (and removes it for any following msg to display)
           $('body').append('<div id="alertbox"><div class="alertmsg">' + message.replace(/\-/g, '<br>') + '</div></div>');    // adds the alert message to the page (and coverts any server line breaks to HTML line breaks)
           $('#alertbox').fadeIn(300).delay(6000).fadeOut(300);                                                                // fades in and remains for 6sec (delay) then fades out.
       };
   </script>

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.