Question

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

当注册完成然后我应该得到一个消息框应该在我的时间戳上显示一条消息“注册完成” 右上角表示消息框应显示消息和隐藏在一秒钟内。我不想使用警报，而是使用警报消息框。

     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（'注册已完成'）

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

在时间戳中显示和隐藏消息框

1 个答案: