[英]Bootstrap: file input field ignores clicks when used in modal dialog
I have a little weird problem with Bootstrap and a file field: 我对Bootstrap和文件字段有一点奇怪的问题:
For a project I'm implementing a simple upload dialog. 对于一个项目,我正在实现一个简单的上传对话框。
http://jsfiddle.net/RxxSv/4/ http://jsfiddle.net/RxxSv/4/
As soon as I add data-toggle="modal"
to the modal container, the file input field stops reacting to clicks (and the browser won't show the file selection dialog). 一旦我将data-toggle="modal"
到模态容器,文件输入字段就会停止对点击作出反应(并且浏览器不会显示文件选择对话框)。
I suspect this to be caused by Bootstrap's modal code/event handling. 我怀疑这是由Bootstrap的模态代码/事件处理引起的。 Somewhere the click event is getting lost, but I can't really figure it out. 在某个地方,点击事件正在迷失,但我无法弄明白。
Any ideas? 有任何想法吗?
I can't really explain why but if you put all the attributes that are in the documentation (in the Live Demo), the input works correctly. 我无法解释原因,但是如果您放置文档中的所有属性(在Live Demo中),输入就能正常工作。
<div id="modal-upload" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
JSFiddle: http://jsfiddle.net/4TQvY/ JSFiddle: http : //jsfiddle.net/4TQvY/
My comrade adviced to do it in another way: 我的同志建议以另一种方式做到这一点:
<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 separate a & input and then invoke click event 单独输入&输入然后调用click事件
jQuery("#prefix").click(function()
{
console.log("INSERT JSON");
$("#file_source").click();
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.