Input Type File Not Working In Bootstrap Modal
html, twitter-bootstrap
Solution
Remove `data-toggle="modal"` from your container div.
This attribute should only be in the `button` or `a` tag used to launch the modal.
Problem
This is incredibly odd. I have a basic Bootstrap modal with no fancy stuff going on and `input type=file` is not working inside of it. When you click it, nothing happens. If the file input is moved outside of the modal and onto the page, then no issues. Here's the modal code for reference: ``` <div id="addImageModal" class="modal hide fade" data-toggle="modal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> x </button> <h4>Add Drawing Image</h4> </div> <div class="modal-body"> <div class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputDisplayName">Display Name</label> <div class="controls"> <input id="inputDisplayName" type="text" placeholder=""> </div> </div> <div class="control-group"> <div id="previewImage"></div> </div> <div class="control-group"> <input type="file" name="files[]" multiple=""> </div> </div> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Cancel</a> <a href="#" class="btn btn-primary btnUploadImage">Upload</a> </div> </div> ``` Really strange issue. Any ideas? EDIT: It is Bootstrap 2.3.1 and I've tried setting z-index on the input for the fun of it and it made no difference.