Question

我创建了一个多标签模式来处理登录和注册我网站上的内容。以下是模态的代码：

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="signInModalLabel">Enter the site</h4>
      </div>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
        <li><a data-toggle="tab" href="#registerTab">Register</a></li>
      </ul>
      <div class="tab-content">
        <div id="loginTab" class="tab-pane fade in active">
          <div class="modal-body">
            <form class="form-horizontal" id="loginForm">
              <div class="form-group">
                <label for="inputUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" id="inputUsername"required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputPassword" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="login-error"></p>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p id="forgotPass">Forgot password?</p>
                </div>
              </div>
            </form>

            <form class="form-horizontal" id="forgotPassForm">
              <p>Please fill-in your email address</p>
              <div class="form-group">
                <label for="inputForgotPass" class="control-label col-xs-2">E-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" id="inputForgotPass" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="forgot-error"></p>
                </div>
              </div>
            </form>

          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" form="loginForm">Login</button>
            <button type="submit" class="btn btn-primary" form="forgotPassForm">Send</button>
          </div> 
        </div>
        <div id="registerTab" class="tab-pane fade">
          <div class="modal-body">
            <form class="form-horizontal" id="registerForm">
              <div class="form-group">
                <label for="inputNewUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" id="inputNewUsername" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputNewPassword" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewPassword2" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputNewPassword2" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewEmail" class="control-label col-xs-2">E-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" id="inputNewEmail" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="reg-error"></p>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" form="registerForm">Register</button>
          </div>              
        </div>
      </div>
    </div>
  </div>
</div>

这是模式，因为它看起来像是时间：

现在，如果用户点击“忘记密码”链接，则会显示以下信息：

现在，此时如果用户关闭模式并重新打开它（不刷新页面），则显示忘记密码表单，而不是初始密码表单（并且无法返回登录表单，除了重新加载网站）。我尝试了几种解决方案，例如this，但它不起作用。如何解决这个问题？

提前谢谢。

Answer 1

首先，我建议您在“发送”按钮的左侧添加“取消”按钮。单击“取消”按钮将返回到原始登录表单。

使用“取消”按钮，以下内容应该有效：

$('#signInModal').on('hidden.bs.modal', function() { 
    // reset multi-tab modal to initial state 
    $(this).find('.nav-tabs a:first').tab('show');
    $('#cancelBtnId').click();    
}) ;

尝试并告诉我们： - ）

Answer 2

Bootstrap模式有一些事件。其中一个是hide.bs.modal，它在调用hide实例方法时立即触发。所以你可以尝试这样的事情：

$("#signInModal").on("hide.bs.modal", function () {
    $("#signInModal .loginForm").show();
    $("#signInModal .forgotPassForm").hide();
});

如何将多标签模式重置为初始内容？

2 个答案: