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

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:
Image may be NSFW.
Clik here to view.

Good luck!