Click here to Skip to main content
Click here to Skip to main content

jQuery Alert Popup

, 9 Jul 2012
Rate this:
Please Sign up or sign in to vote.
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. 1. The first step is to implement the Alert popup styles. We create three CSS classes … Continue reading →

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.

  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. <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>
  3. 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.
    <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>
  4. Show the Alert
  5. To show the alert, just call the alert function with the alert message.

    jqxAlert.alert('Alert Message');

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

jqwidgets
jQWidgets
United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

Follow on   Twitter

Comments and Discussions

 
GeneralFormatting PinmemberTim Corey9-Jul-12 9:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 9 Jul 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid