Display and hide of message box within a time stamp

Question

I have a login page where i can perform registration also .If a user is new then he has to click on SIGN Up page for registration then a dialogbox is displayed with the registration fields.

When the registration is complete then i should get a message box that should display me a message "Registration Complete" for a time stamp at the right top corner means messagebox should display with the message and hide within a sec.I don't want to use alert but instead of it some message box.

     page.gsp

   <div class="pageOneResolution">
    <div class="costing" id="costingBubbleText">
        <img class="defis-visuel"
            src="${resource(dir: 'images', file: 'temp2.png')}"
            alt="Guido Heading" />
    </div>
    <div class="costing" id="GuidoImage">
        <img class="defis-visuel"
            src="${resource(dir: 'images', file: 'guido.png')}"
            alt="Guido Image" />
    </div>
    <div>


        <div id="infoContainer">
            <img class="squareContainer"
                src="${resource(dir: 'images', file: 'square-clip-art-5.gif')}"
                alt="thinking" />
            <div id="subInfoContainer">
                <p id="getStartedText">Get Started</p>

                <p
                    style="color: black; text-align: left; font-size: 14px; font-family: Arial; font-weight: bold;">
                    User Email <br /> <input class="infoContainerFields"
                        id="emailfield" placeholder=" Enter your Email"
                        data-bind="value: $data.eMail" />
                </p>
                <p
                    style="color: black; text-align: left; font-size: 14px; font-family: Arial; font-weight: bold;">
                    Password <br /> <input class="infoContainerFields"
                        id="passwordfield" placeholder=" Enter your Password"
                        data-bind="value: $data.password" />
                </p>



                <p>
                    <a href="javascript:void(0)" class="signup"
                        onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Sign
                        Up</a>
                </p>
            </div>
        </div>

        <p>
            <a href="javascript:void(0)"
                onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Sign
                Up</a>
        </p>
      <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'  >
          <div id="light"  class="white_content" style="color: black;">
            <form action="#/cart" method="post">

                <input type="hidden" name="url"value="${grailsApplication.config.serverURL}"/>

                <p><label>first name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="firstName" class="formElement" data-bind='value: firstName'/></label></p>
                <p><label>last name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="lastName" class="formElement" data-bind='value: lastName' /></label></p>
                <p><label>organisation: <input name="organisation" class="formElement" data-bind='value: organisation' /></label></p>
                <p><label >email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" name="email" id="email" class="formElement" data-bind='value: email' /></label><label id="emailError"></label></p>
                <p><label>password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="password" name="password" class="formElement" data-bind='value: password' /></label></p>
                <p><label style="margin-left: -37px;">confirm password:</label> <input type="password" name="confirmPassword" class="formElement" data-bind='value: confirmPassword' /></p>
                <p><input type="submit" value="register" /></p>

            </form>
              <a href="javascript:void(0)"
                onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';clearBox();">Close</a>
          </div>
      </div>
        <div id="fade" class="black_overlay"></div>


    </div>

    <a id="firstPageNavigator" class="go" href="newCosting.gsp#"
        data-bind="click: $data.capitalizeLastName" onClick="showDiv()"
        title="2nd Page"></a>
</div>

Answer 1

you can include one div at the top like <div id="statusMsg"></div>

After success in registration you can append the status message using jquery

$('#statusMsg').html('Registration completed')

And use fade out or delay method to hide that message