Azharkamar.com

Magento – Modifying the Default Message Alert Box to look like a Popup Dialog

Tutorials
24 Nov 2011
6 comments

Magento developers out there, here’s a simple way to replace the default error/success notification box (the message that appears after you submit forms) to one that looks like a modal dialog popup using some simple JavaScript and CSS.

As you know, the messages DIV element that shows a success or error message appears at the top of the page content by default. This isn’t good because it is displayed inline with the current content and therefore pushes the elements below it downwards and hence ruining the current layout of your store.

This can be improved by styling the messages element to display as absolute and to enhance it further, make it appear as if it is a modal dialog box. This way, the messages box will not interfere with the store layout and in addition enhance the user interface and experience.

Read on to find out how to enhance Magento’s default messages/notification box.
Note: This hack requires the modification of a Magento core file. Tested on Magento version 1.6.1.0.

Demo of Magento’s Default Messages Box

For those who wanna see how the default notification box looks like in Magento, follow these instructions:

  1. Go to https://demo.magentocommerce.com/customer/account/login.
  2. Fill up some bogus text into the Email Address and Password field under the Registered Customers box (e.g. aaa@aaa.com, 123456)
  3. Click the Login button at the bottom right.
  4. When the page has reloaded, you will notice a red box at the top with the error message Invalid login or password.

This, is the default messages box I’m talking about. I will now explain how to easily improve the way it looks and works.

Edit Your Theme’s Stylesheet

  1. Navigate to your theme’s main stylesheet – /www/skin/frontend/default/your-theme/css/styles.css
  2. Add these codes at the bottom of the stylesheet:
    #messages {
        margin: 100px 0 0 280px;
        position: absolute;
        text-align: center;
        width: 360px;
        z-index: 99;
    }
    
    .msgclose {
        color: #DF280A;
        float: right;
        font-family: Comic Sans MS;
        font-size: 14px;
        font-weight: bold;
        margin: 0 8px;
        text-decoration: none;
    }
    
  3. Now look for the .error-msg, .success-msg, .note-msg, .notice-msg CSS selector and add this property to it:
    padding: 40px;

Edit Messages.php

  1. Locate the Messages.php file here /www/cuppakiddo/app/code/core/Mage/Core/Block/Messages.php
  2. Look for this line (use Ctrl+f in Dreamweaver):
    $html .= '<' . $this->_messagesSecondLevelTagName . ' class="' . $type . '-msg">';
    

    And add this code above it:

    $html .= '<a class="msgclose" href="#" onclick="document.getElementById('messages').style.visibility='hidden'">x</a>';
    

    What this piece of code does is simply display a close button (an ‘x’) and assign an onclick action to it that will close the notification box.

  3. Now look for:
    $html .= '<' . $this->_messagesFirstLevelTagName . ' class="messages">';

    And replace it with:

    $html .= '<' . $this->_messagesFirstLevelTagName . ' id="messages">';

    We are changing the class to id because the onclick function will be looking for a messages ID, as shown above.

Done deal! An error message box should now look like so:

Good luck!

Author - Azhar Kamar
6 Comments Revolving around this Article
  1. Henry Cullen

    this gives a syntax error

  2. Sunset

    I try to put this code, but it not work and show syntax error message on log in page. How to solve it?

    $html .= ‘x‘;

  3. Jay

    When I type $html .= ‘x‘; in code, got a 500 web server error. any solutions ?

  4. Laiza

    Hi,

    I think there is a problem at the close button line:

    $html .= ‘x‘;

    Frank mentioned to escape the single quotes, but I don’t know how to do this. Could you help me?

    Thank you!

  5. Frank

    Hello!
    Thanks a lot for this helpful article. I had to escape the single quotes to make it work.

  6. Luis

    Very useful article. Thanks a lot for it! I enjoyed your whole website very much. Only found the content box opacity too low, what made the text a bit difficult to read.

Write a Comment! NOW! :)

Current ye@r *