jquery - 在时间戳内显示和隐藏消息框

Question

我有一个登录页面，我也可以在其中执行注册。如果用户 是新的，那么他必须点击 SIGN Up 页面进行注册，然后 显示带有注册字段的对话框。

当 注册完成然后我应该得到一个消息框应该 在 右上角意味着消息框应该显示消息和 在一秒钟内隐藏。我不想使用警报，而是一些 消息框。

     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

你可以在顶部包含一个 div，比如 <div id="statusMsg"></div>

注册成功后你可以使用jquery追加状态信息

$('#statusMsg').html('注册完成')

并使用淡出或延迟方法隐藏该消息