Question

我在我的应用程序中设计了一个bootstrap模式。模态显示注册表单。当用户点击登录这是一个锚标签我想关闭模态，以便我可以显示登录模式。 Jquery没有得到锚标签的id。怎么做。这是我的模态代码：

  <div class="modal fade modal-white" id="signup" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Signup</h4>
        </div>
        <div class="modal-body">


      <form id="signupForm" method="post" action="/signup">
        <h1>create an account</h1>
        <input name="user[name]" type="text" placeholder="What's your username?" pattern="^[\w]{3,16}$" autofocus="autofocus" required="required" class="input pass"/>
        <input name="user[password]" type="password" placeholder="Choose a password" required="required" class="input pass"/>
        <input name="user[password2]" type="password" placeholder="Confirm password" required="required" class="input pass"/>
        <input name="user[email]" type="email" placeholder="Email address" class="input pass"/>
        <input type="submit" value="Sign me up!" class="inputButton"/>
        <div class="text-center">
            already have an account? <a href="#" id="login_id">login</a>
        </div>
      </form>

        </div>

      </div>

    </div>
  </div>

现在继承我的jquery代码，因为我试图点击#login_id并关闭当前模式。

 $("#signupForm #login_id").click(function(e) {
      e.preventDefault();
      $('#signup').modal('toggle'); 
});

Answer 1

当您尝试绑定点击事件时，很可能没有准备好DOM。在这种情况下，将代码包装到$(function() { ... })中。或者确保您的脚本位于HTML之后。

但是如果你只是想关闭模态，你甚至不需要javascript。只需将data-dismiss="modal"属性添加到您的登录链接中，Bootstrap将为您绑定必要的操作：

<div class="text-center">
  already have an account? <a href="#" id="login_id" data-dismiss="modal">login</a>
</div>

模式没有关闭单击锚标记

1 个答案: