Bootstrap dialog prompt (form) not work

Question

can you guys help me? I am using boostrap..and i make login form in dialog prompt but it's not working..

this is the link

<a href="#login" data-toggle="modal">LOGIN</a>

and this is coding for dialog prompt

<div class="modal fade" id="login" role="dialog">
  <div class="modal-dialog">
     <div class="modal-content">
      <form method="post" class="form-horizontal" role="form">
      <div class="modal-header">
   <h4>Login</h4>
   <div>
   <div class="modal-body">
    <div class="form-group">
    <label for="username" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
   <input type="text" class="form-control" name="username" id="username" placeholder="User Name">
      </div>
  </div>
    <div class="form-group">
   <label for="password" class="col-sm-2 control-label">Password</label>
   <div class="col-sm-10">
   <input type="password" class="form-control" name="password" id="password" placeholder="&#xf111; &#xf111; &#xf111; &#xf111; &#xf111; &#xf111;" style="font-family:Arial, FontAwesome">
   </div>
  </div>
     
  </div>
  <div class="modal-footer">
    <a class="btn btn-default" data-dismiss="modal"> CLOSE </a>
   <button type="submit" class="btn btn-primary" name="login"> LOGIN </button>
  </div>
  </div>
  </div>
  </form>
 </div>
  </div>
</div>

when i clicked LOGIN link it will just refresh the page and the link will change from localhost/signup.php to localhost/signup.php#login

please help me.

Answer 1

This should work.. add the date-target=""

<button class="btn btn-primary" data-toggle="modal" data-target="#login">LOGIN</button>

Make sure you've imported the bootstrap.css, bootstrap.js and also jQuery is required!

Answer 2

You can try [a href="#" data-toggle="modal" data-target="#login"] LOGIN [/a] instead of [a href="#login" data-toggle="modal"] LOGIN[/a] and check it again.

[Note: Change the square braces to angular braces.]

If not working then probably you have not added bootstrap.js in your page.

So, first of all add bootstrap.css in your page then jquery.js and then bootstrap.js and then any other custom .js page.