Attempting to focus the input field using the modal data-target function on button click. The input field is focused, but a div called
<div class="modal-backdrop in">Upload Now button on the modal. You can view the demo here.
.height500 {
height:500px;
background-color:yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="height500"><input type="text" name="" class="" id="noimgtakediv" /></div>
<a data-toggle="modal" data-target="#portfoliomsgmodal" class="btn btn-danger btn-sm"> Click to Open Modal</a>
<!-- Modal -->
<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">TIP</h3> </div>
<div class="modal-body">
<label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-target="#noimgtakediv" data-toggle="modal" data-dismiss="modal">Upload Now</button>
<input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Remind me later">
</div>
</div>
</div>
</div>