Twitter引導：模式在手機上

我想弄清楚爲什麼我似乎無法點擊模式內的任何東西，當它出現時（在移動設備上 - 它可以在PC瀏覽器中正常工作）。我有這樣的代碼是從Twitter的引導一個基本的模式：Twitter引導：模式在手機上

<!-- 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事件打開。它打開得不錯，但在我的手機上，我無法點擊（或者我總是錯過？）按鈕或點擊選擇區域。對此有何想法？

感謝您的任何幫助。

來源

2013-04-03 trainoasis

它似乎在這裏工作得很好：http://jsfiddle.net/adamdehaven/ECUUR/ – adamdehaven

您是否嘗試在移動設備上訪問它？它不適用於我.. – trainoasis

它適用於運行最新版iOS的iPhone 5。訪問您的手機上：http://jsfiddle.net/adamdehaven/ECUUR/show/ – adamdehaven

找到了一個解決方案..如果任何人都會有同樣的問題。剛剛添加'積極'類的模態，它現在工作正常。

class="modal hide fade active"

來源

2013-04-04 08:22:54 trainoasis

謝謝...解決我的問題 – kebyang

我有同樣的問題。這是由於包含bootstrap-responsive.css（在我的情況下爲v2.0.3）引起的，當您點擊輸入字段和關鍵字彈出窗口時，它會影響模式的正確顯示及其版本。我稍微修改this StackOverflow的問題與此提出的補丁：在這兩個@media (max-width: 480px)和@media (max-width: 767px)媒體查詢

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

，似乎很好地工作。

來源

2013-05-13 22:36:16 fustaki

3年多後，我需要添加一個模式到舊的bootstrap 2網站，這有助於。謝謝！請注意，將它包含在兩個媒體查詢中都沒有意義; '''@media（max-width：767px）'''適用於所有較小的屏幕尺寸，並且它本身就足夠了。 – cobberboy

Twitter引導：模式在手機上

回答

相關問題