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

http://azharkamar.com/5378/magento-modifying-default-message-alert-box-popup-dialog/

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;

}

 

 

 

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')

 

 

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.

 

 

 

Now look for:

 

 

 

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

 

 

And replace it with:

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