3

我试图弄清楚为什么当它出现时我似乎无法点击模式内的任何东西（在移动设备上 - 它在电脑浏览器中工作正常）。我有一个像这样的代码，它是来自 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 -->

这个模态是由 javascript 事件打开的。它打开得很好，但在我的手机上我无法单击（或者我一直错过？）按钮或点击选择字段。对此有什么想法吗？

谢谢你的帮助。

4

2 回答 2

3

找到了解决方案..如果有人会遇到同样的问题。刚刚在模态中添加了“活动”类，现在可以正常工作了。

class="modal hide fade active"
于 2013-04-04T08:22:54.663 回答
3

我有同样的问题。这是由包含bootstrap-responsive.css（在我的情况下为 v2.0.3）引起的，当您点击输入字段并弹出关键字时，它会影响模式及其版本的正确显示。我用这个稍微修改了这个StackOverflow 问题中的补丁：

.modal { 
    position: fixed; 
    top: 20px !important; 
    right: 3%; 
    left: 3%;
    width: auto; 
    margin: 0; 
}

在@media (max-width: 480px)和@media (max-width: 767px)媒体查询中，它似乎工作正常。

于 2013-05-13T22:36:16.010 回答