twitter-bootstrap Twitter 引导程序：手机上的模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15794592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap: modal on mobile phones
提问by trainoasis
I'm trying to figure out why I can't seem to click on anything inside the modal when it comes up (on a mobile device that is - it works OK in a pc browser). I have a code like this which is a basic modal from twitter bootstrap:
我试图弄清楚为什么当它出现时我似乎无法点击模态内的任何东西（在移动设备上 - 它在个人电脑浏览器中工作正常）。我有一个这样的代码，它是来自 twitter bootstrap 的基本模式：
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria hidden="true">×</button>
<h3 id="myModalLabel">choose!</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<form>
<fieldset>
<select class="input-large">
<option value="0">10:15</option>
<option value="1">12:45</option>
<option value="2">13:15</option>
</select>
</fieldset>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn pull-left" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div> <!-- modal END -->
And this modal is opened by javascript event. It opens well enough, but on my phone I can't click (or i miss all the time?) the buttons or hit the select field. Any thoughts on that?
这个模态是由javascript事件打开的。它打开得很好，但在我的手机上，我无法点击（或者我总是错过？）按钮或点击选择字段。对此有何想法？
Thanks for any help.
谢谢你的帮助。
采纳答案by trainoasis
Found a solution..if anyone will have the same issue. Just added 'active' class to the modal and it's working ok now.
找到了解决方案..如果有人会遇到同样的问题。刚刚在模态中添加了“活动”类，现在可以正常工作了。
class="modal hide fade active"
回答by fustaki
I had the same problem. It is caused by the inclusion of bootstrap-responsive.css(v2.0.3 in my case) and it affects both the proper display of the modal and its edition when you tap the input field and the keyword pops-up.
I slightly modified the patch presented in thisStackOverflow question with this:
我有同样的问题。这是由包含bootstrap-responsive.css（在我的情况下为v2.0.3）引起的，当您点击输入字段和弹出关键字时，它会影响模态及其版本的正确显示。我稍微修改了这个StackOverflow 问题中提供的补丁：
.modal {
position: fixed;
top: 20px !important;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
in both @media (max-width: 480px)and @media (max-width: 767px)media queries and it seems to work fine.
在@media (max-width: 480px)和@media (max-width: 767px)媒体查询中，它似乎工作正常。
