Old-fashion

Try this "old-fashion" change password form.

Password
Confirm
 

With transparent message

One transparent message will be display to indicate that a post is in progress.
And another transparent message will appear just below the title "With transparent message" to display error or notice and will fade after a mouse click.

Password
Confirm
 

Rails code explained

You just have to add 3 lines in your view (RHTML file).

To display flash[:error/:notice] messages after submitting form (my title "With transparent message" has id tm_title):

<%= transparent_flash_message  :top => 30, 
                               :afterElement => "'tm_title'", 
                               :hideMode => "'click'", 
                               :hideDelay => 0, 
                               :displayMode => "'onload'"%>

To generate code for overlay message:

<%= transparent_message_create("info_message", "Saving password<br/>", "/images/progress_FFF.gif")  %>

To display overlay message on form submit, add this after your form (my form id is save_password_form):

<%= transparent_message_for_form "save_password_form", "info_message", :fullscreen => true %>

CSS File (toggle)

/* Transparent form message (error and notice) for static form*/
.transparent_message {
  width: 95%;
  text-align: center;
  font-size: 30px;
  opacity:  0.8;
  position: absolute;
  top: 20px;
  -moz-border-radius:10px;
	
}

.transparent_error {
  background: #FFA3A9;
  border: 1px solid #750004;
}

.transparent_error p {
  color: #560109;
}

.transparent_notice {
  background: #9BFFA3;
  border-top: 1px solid #23571D;
  border-bottom: 1px solid #23571D;  
  margin: 10px;
}

.transparent_notice p {
  color: #23571D;
}

/* Saving message for static form */
#info_message {
  position: absolute;
  background: #FFF;
  opacity:  0.7;
}

#info_message p {

Full view code (toggle)

<%= transparent_flash_message  :top => 30, 
                               :afterElement => "'tm_title'", 
                               :hideMode => "'click'", 
                               :hideDelay => 0, 
                               :displayMode => "'onload'"%>
                               
<%= transparent_message_create("info_message", "Saving password<br/>", "/images/progress_FFF.gif")  %>

<div class="intro">
  One transparent message will be display to indicate that a post is in progress.<br />
  And another transparent message will appear just below the title "With transparent message" to display error or notice and will fade after a mouse click.
</div>
<div class="form">    
  <div class="form_content">    
    <%= start_form_tag({:action => "post"}, {:id => "save_password_form"}) %>
      <span class="label">Password</span><span class="field"><%= password_field_tag "password" %></span><br class="clear"/>
      <span class="label">Confirm</span><span class="field"><%= password_field_tag "confirm" %></span><br class="clear"/>
      <span class="label"> </span><span class="field"><%= submit_tag "Save" %></span><br class="clear"/>
    <%= end_form_tag %>
  </div>
</div>

<%= transparent_message_for_form "save_password_form", "info_message", :fullscreen => true %>