user3108790 user3108790 - 3 months ago 72
jQuery Question

data-toggle and data-target not working in bootstrap

I am using bootstrap to develop a navbar and on that navbar there are two buttons one for login and other for sign up. I want that when user clicks login a modal pop up fires up and when signup is clicked the user to be redirected to another page. Below is my code but it seems to me that it is not working. I tried to use anchor tag and setting class to

btn btn-primary
but then the button becomes very large and
btn-sm
class has no effect on size.

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navbar-btn"><button id="loginbutton" type="button" class="btn btn-primary" data-target=".modal"><i class="glyphicon glyphicon-log-in"></i>Login</button></li>
<li class=" navbar-btn"><button type="button" class="btn btn-success"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button></li>
</ul>
</div>
<!-- Modal -->
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="login" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 pull-right">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>

Answer

I fixed your code: JSFiddle

You just forgot some parts like data-toggle="modal" or the two divs i added <div class="modal-dialog"><div class="modal-content"></div></div>.

By the way, if you want a button in a navbar there is a class for that:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>