Custom System Messages
Requirements
- ExpressionEngine 2.1
- PHP 5
- MSM Compatible
This extension lets you define any 2 templates within your template groups to be used as the error page. You have access to all the usual variables from the Specialty Templates, plus two new ones {referrer} and {action}.
Variables
{meta_refresh}
Renders the meta refresh tag for your HTML head
{heading}
Message header
{content}
Message details
{link}
Link to return to the previous page.
{action}
The ACT ID
{error}
Boolean: If the action is an error message or not.
{referrer}
The URL prior to the error message
There are also aliases for for each variable that are parsed early, thus they can be used in conditional statements and other template tags. Each variable above has an alias prefixed with csm:. For example {content} is also available with {csm:content}. If you are having trouble with the original variables, try the aliases.
{action} will return the ACT ID which you can use it in your templates to show messages specific to the action the user performed. The {error} variable returns true or false if the form returns as an error. By default, EE uses the same ACT ID for success or error messages, only internally does it know which message to display (e.g. what the {content} variable is set to).
This is a example template showing how to use the variables. This is a simple example if you only need to detect a small number of "error" actions and display a specific message for that action.
Even though the {action} and {error} variables are available, you may want to use entirely different templates for each ACT and on their success or error results instead of conditionals. You can do this by selecting which template each action in the drop down is assigned to, there is also an "(On Error)" version for each action.
New in version 2.4
This version introduces a new option that lets you redirect the user to the actual template you define as your Error or Submission template. Older versions used the native error handling within ExpressionEngine, which means the error messages were rendered in a page at the root of your domain, so it appears as if the error messages are on the home page of your site. This new feature is only supported in ExpressionEngine 2.4+
New in version 2.2
Custom System Messages supports ajax responses. There are 2 new template tags to enable ajax responses. Here is a quick video on how it works. Note that this feature does not work with all 3rd party add-ons, and a couple of native ExpressionEngine forms. I added this feature before testing it with every possible form assuming a JSON response was provided from an ajax submission, however, not all forms return the required JSON response. Basically, use this feature with caution.
{exp:system_messages:js}
This will add the required JavaScript methods to handle the ajax request and response to the page. Add it to the <head> of your document. It will attempt to load jQuery, and jQuery UI, if they are not already found.
Parameters
include_ui_css (default: no)
If you wish to include the default dialog styles used in the CP set this to "yes". Or include your own UI styles in thetag.
jq_version (default: 1.5.2)
Define which version of jQuery you would like to load if it isn't already loaded.
ui_version (default: 1.8.12)
Define which version of jQuery UI you would like to load if it isn't already loaded.
{exp:system_messages:form}{/exp:system_messages:form}
This tag needs to wrap your <form> tag. It will add several data attributes to the <form> tag which are then used by the JavaScript to handle the events.
{exp:system_messages:form}
{exp:member:login_form return="pages/index"}
<label>Username</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<input type="submit" name="submit" value="Submit" />
{/exp:member:login_form}
{/exp:system_messages:form}
If you don't like the JavaScript provided by the plugin tag, then you will need to write your own or customize the plugin code 
The plugin is designed to be a simple implementation and/or a guide on how to implement your own, not to be a one size fits all solution.
Parameters
close_button (default: Close)
Text used for the "close" link below the message.
width (default: 600)
Width in pixels for the dialog window.
modal_container (default: modal_container)
The CSS class of the main div appended to the body in which the modal is inserted.
message_container
If set to a valid jQuery selector the message response will be injected into the HTML element you entered. For example: message_container="#error_message" will inject the EE messages into the element with the ID of error_message. The modal window will not open if this is defined.
message_on_success (default: yes)
This will show a success message, either in a dialog or within the message_container. If you do not want to show success messages, set this to "no".
redirect_on_success (default: yes)
After a success message has been displayed, the default redirect action will occur after 4 seconds.
redirect_link_text (default: blank)
Additional text can be added to a success or failed message, such as "Redirecting you to the home page."
redirect_to (default: blank)
If a RET parameter is found in the form tag, it will be used for the redirect action. You can optionally override that by setting a valid URL to the redirect_to value.
message_container_tag (default: section)
This is the HTML container tag that wraps the header and error message.
message_header_tag (default: h3)
This is the HTML tag used to display the message header.
message_error_tag (default: div)
This the HTML container tag that wraps the error messages. By default EE renders error messages in an list.