CODEWITHSUNDEEP
jquerytwitter-bootstrap
Kamran Saeed
Kamran Saeed

Reputation: 51

modal not closing on clicking anchor tag

i have designed a bootstrap modal in my application. Modal shows a signup form. When user clicks the login which is an anchor tag i want to close the modal so that i can show login modal. Jquery not getting the id of anchor tag. How to do it. Here's my modal code:

  <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>

Now heres my jquery code as i try to get #login_id clicked and close the current modal. 

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

Upvotes: 1

Views: 1485

Answers (1)

dfsq
dfsq

Reputation: 193261

Most likely you don't have DOM ready when you are trying to bind click event. In this case wrap your code into $(function() { ... }). Or make sure your script is located after HTML.

But you don't even need javascript if you just want to close modal. Simply add data-dismiss="modal" attribute to your login link and Bootstrap will bind necessary actions to it for you:

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

Upvotes: 1

Related Questions