jQuery Alert Popup

In this post, we’ll show you how to implement a simple Alert popup window which you can use instead of the standard JavaScript alert.

<style type="text/css">
.jqx-alert
{
 position: absolute;
 overflow: hidden;
 z-index: 99999;
 margin: 0;
 padding: 0;
}
.jqx-alert-header
{
 outline: none;
 border: 1px solid #999;
 overflow: hidden;
 padding: 5px;
 height: auto;
 white-space: nowrap;
 overflow: hidden;
 background-color:#E8E8E8; background-image:-webkit-gradient(linear,0 0,0 100%,from(#fafafa),
    to(#dadada)); background-image:-moz-linear-gradient(top,#fafafa,#dadada); 
    background-image:-o-linear-gradient(top,#fafafa,#dadada);
}
.jqx-alert-content
{
 outline: none;
 overflow: auto;
 text-align: left;
 background-color: #fff;
 padding: 5px;
 border: 1px solid #999;
 border-top: none;
} 
</style>

<script type="text/javascript">
  jqxAlert = {
       // top offset.
       top: 0,
       // left offset.
       left: 0,
       // opacity of the overlay element.
       overlayOpacity: 0.2,
       // background of the overlay element.
       overlayColor: '#ddd',
       // display alert.
       alert: function (message, title) {
            if (title == null) title = 'Alert';
            jqxAlert._show(title, message);
       },
       // initializes a new alert and displays it.
       _show: function (title, msg) {
            jqxAlert._hide();
            jqxAlert._handleOverlay('show');
            $("BODY").append(
                      '<div class="jqx-alert" style="width: auto; height: auto; 
                         overflow: hidden; white-space: nowrap;" id="alert_container">' +
                      '<div id="alert_title"></div>' +
                      '<div id="alert_content">' +
                           '<div id="message"></div>' +
                           '<input style="margin-top: 10px;" type="button" 
                              value="Ok" id="alert_button"/>' +
                      '</div>' +
                      '</div>');
            $("#alert_title").text(title);
            $("#alert_title").addClass('jqx-alert-header');
            $("#alert_content").addClass('jqx-alert-content');
            $("#message").text(msg);
            $("#alert_button").width(70);
            $("#alert_button").click(function () {
                 jqxAlert._hide();
            });
            jqxAlert._setPosition();
       },
       // hide alert.
       _hide: function () {
            $("#alert_container").remove();
            jqxAlert._handleOverlay('hide');
       },
       // initialize the overlay element.
       _handleOverlay: function (status) {
            switch (status) {
                 case 'show':
                      jqxAlert._handleOverlay('hide');
                      $("BODY").append('<div id="alert_overlay"></div>');
                      $("#alert_overlay").css({
                           position: 'absolute',
                           zIndex: 99998,
                           top: '0px',
                           left: '0px',
                           width: '100%',
                           height: $(document).height(),
                           background: jqxAlert.overlayColor,
                           opacity: jqxAlert.overlayOpacity
                      });
                      break;
                 case 'hide':
                      $("#alert_overlay").remove();
                      break;
            }
       },
       // sets the alert's position.
       _setPosition: function () {
            // center screen with offset.
            var top = (($(window).height() / 2) - 
                      ($("#alert_container").outerHeight() / 2)) + jqxAlert.top;
            var left = (($(window).width() / 2) - 
                       ($("#alert_container").outerWidth() / 2)) + jqxAlert.left;
            if (top < 0) {
                 top = 0;
            }
            if (left < 0) {
                 left = 0;
            }
            // set position.
            $("#alert_container").css({
                 top: top + 'px',
                 left: left + 'px'
            });
            // update overlay.
            $("#alert_overlay").height($(document).height());
       }
  }
</script>

To show the alert, just call the alert function with the alert message.

jqxAlert.alert('Alert Message');

1. The first step is to implement the Alert popup styles. We create three CSS classes which we add to the alert popup, to its header part where the title is displayed and to its content part where the message is displayed.
2. The next step is to implement the Alert popup. We create an object called jqxAlert and define four options. The top and left options specify the alert’s position relative to the browser window’s middle-center position. The ‘overlayOpacity’ and ‘overlayColor’ options specify the opacity and background of the alert’s overlay. We add an overlay element because the popup should be modal and until it is visible, the end-user should not be able to click the content outside of the popup.
   • The ‘alert’ function is the one that should be called to display an alert. It has two parameters – message and title (optional). The ‘alert’ function specifies the title and the message displayed in the alert popup and calls the ‘_show’ function. When the ‘_show’ function is called, any old alerts are removed.
   • The ‘_show’ function set ups the overlay area by calling the ‘_handleOverlay’ function and dynamically appends the HTML structure of the Alert popup to the document’s body. In general, the ‘_show’ function builds the alert popup, shows it to the user and sets its position by calling the ‘_setPosition’ utility function.
   • The ‘_handleOverlay’ function adds an additional HTML element to the document’s body with size equal to the document’s size, absolute position set to the top-left edge of the page and very high z-index, because that element should be displayed over the other HTML elements on the page.
   • The ‘_hide’ function hides the alert and removes it completely from the web page.
   • The ‘_setPosition’ function sets the alert popup’s position to the middle of the screen, but also takes into account the ‘left’ and ‘top’ options. By setting the ‘left’ and ‘top’ options, you can change the location of the displayed popup.
3. Show the Alert