iPhone上的Modal框不滾動

你好想知道我是否可以得到一些幫助，因爲我還沒有發現任何可以解決這個問題的網絡上，在iPhone上的twitter引導模態框什麼時候是大的頁面沒有滾動來獲得盒子的頁腳。iPhone上的Modal框不滾動

代碼中使用

<div class="modal hide" id="electricityModal"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h3>Submit A Electricity Reading</h3> 
     </div> 

     <div class="modal-body"> 

      <div class="control-group"> 
       <label class="control-label">Date/Time</label> 
        <div class="controls"> 
         <span class="input-medium uneditable-input">22 Aug 2012, 9:45AM</span> 
        </div> 
      </div> 

      <div class="control-group"> 
       <label class="control-label" for="reading-peak">Peak</label> 
       <div class="controls"> 
        <input style="letter-spacing: 10px;" type="text" id="reading-peak" class="input-medium"> 
       </div> 
      </div> 

      <div class="control-group"> 
       <label class="control-label" for="reading-off-peak">Off Peak</label> 
       <div class="controls"> 
        <input style="letter-spacing: 10px;" type="text" id="reading-off-peak" class="input-medium"> 
       </div> 
      </div> 

     </div> 

     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-primary">Lodge Reading</button> 
     </div> 
    </div>

來源

2012-08-22 Chris R

修復了這是在加入下面的CSS（上白手起家GitHub的問題找到）

@media (max-width: 480px) { 

     .modal { 
      height: 500px; /* Set a default max height of the modal (adjusted later)*/ 
      position: fixed; /* Display modal in the centre of your screen */ 
      overflow-y: scroll; /* Ensure that the modal is scroll-able */ 
      -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS */ 
     } 
     .modal.fade.in{ 
      top: 5px; /* Use more screen real estate */ 
     } 
     .modal-body{ 
      /* Increase the max height of the modal body to try & avoid both it, 
      * and the modal container having scroll bars which results in odd behavior */ 
      max-height: 2400px; 
     } 
    } 

    /* Now adjust the height so it handles various screen sizes & orientations */ 
    /* You could make this as granular as you like, or have it more granular at common screen sizes 
    * but it should start at the height we set on .modal (i.e. 500px) & work down */ 
    @media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}} 
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}} 
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}} 
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}} 
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}} 
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}} 
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}

來源

2012-08-23 04:06:21

對我而言，只能作爲部分修復。該表單現在可以滾動，但僅限於第一個展示。一旦我滾動一次或者嘗試操縱裏面的任何表單對象，整個事情就會再次崩潰。嘿。感謝分享壽！ – Kirill

這沒有解決我的問題，但幫助了我。謝謝！ – kiev

與@Kirill類似，這對我來說是一個_almost_！它最初起作用，但是當我試圖從下拉列表中選擇一個值（iPhone完全廢棄）時，該錯誤返回。我認爲他們正在修改頁面元素的方式，恢復此CSS修復:( –

我相信給人一種max-height CSS屬性父DIV（ID：electricityModal）可能會幫助並給予滾動條。選擇最適合你的身高。說一些像250像素。

來源

2012-08-22 16:52:30 Devin

試圖沿着沒有做很多更搜索找到了解決後工作。 –

iPhone上的Modal框不滾動

回答

相關問題