Geek Answers Handbook

Bootstrap: file input field ignores clicks when used in a modal dialog

I have a slightly strange problem with Bootstrap and file field:

For the project, I implement a simple download dialog.

http://jsfiddle.net/RxxSv/4/

As soon as I add data-toggle="modal" to the modal container, the file input field stops responding to clicks (and the browser does not display the file selection dialog).

I suspect this is caused by the handling of the modal code / event of Bootstrap. Somewhere, the click event is lost, but I can't figure it out.

Any ideas?

+4
source share
2 answers

I can’t explain why, but if you put all the attributes that are in the documentation (in Live Demo), the input works correctly.

 <div id="modal-upload" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

JSFiddle: http://jsfiddle.net/4TQvY/

+5
source

My friend advised me to do it differently:

 <a class="btn btn-primary" href="#" style="margin-left: 100px" id="prefix">Choose file</a><input type="file" id="file_source" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;">

Make a separate a and type and then trigger the click event

  jQuery("#prefix").click(function() { console.log("INSERT JSON"); $("#file_source").click(); return false; });
0
source

More articles:


All Articles