Bootstrap modal as dropdown - bootstrap-modal

Question

<div id="lastcolumn" class="col-md-3">
<ul class="nav navbar-nav pull-right">
<li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a></li>
<div class="modal" id="loginmodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="Username">Username</label>
<input type="text" name="text" class="form-control">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="Password" name="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li>
<li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li>
</ul>
</div>
</div>
</div>
I want to show bootstrap modal as dropdown under login currently my modal is showing in middle of the screen what i have to do to achieve the desired behaviour, kindly help.enter image description here

Answer 1

Move the .modal div in the li that you want to attach the modal with. Then define position:relative; for that li and position:absolute; for that .modal.
Here's a working snippet. I removed the .modal-backdrop and edited padding and margin for modal. You can ignore them since they are not relevant to the basic problem.
.nav.navbar-nav li{
float:left;
}
.nav.navbar-nav li a.mlogin{
position:relative;
}
div.modal#loginmodal{
position:absolute;
width:200px;
height:300px;
top:30px;
left:0;
padding:0;
margin:0;
}
div.modal#loginmodal .modal-footer{
padding:5px;
margin:0;
}
div.modal#loginmodal .modal-body{
padding:10px 20px;
margin:0;
}
div.modal#loginmodal .modal-header{
padding:5px 20px;
margin:0;
}
.modal-backdrop{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="lastcolumn" class="col-md-3">
<ul class="nav navbar-nav pull-right">
<li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a>
<div class="modal" id="loginmodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="Username">Username</label>
<input type="text" name="text" class="form-control">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="Password" name="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
<li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li>
<li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li>
</ul>
</div>