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!