iPhone上的模式框不滚动 [英] Modal box on iPhone no scroll

问题描述

您好想知道我是否可以获得一些帮助，因为我没有在网上找到任何可以解决此问题的方法，在iphone上twitter引导模式框时，大的页面没有滚动以获取

使用的代码

 < div class =modal hideid =electricityModal> 
 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> 
< h3>提交电力读数< / h3> 
< / div> 
 
< div class =modal-body> 
 
< div class =control-group> 
< label class =control-label>日期/时间< / label> 
< div class =controls> 
< span class =input-medium uneditable-input> 2012年8月22日，9:45上午< / span> 
< / div> 
< / div> 
 
< div class =control-group> 
< label class =control-labelfor =reading-peak> Peak< / label> 
< div class =controls> 
< input style =letter-spacing：10px; type =textid =reading-peakclass =input-medium> 
< / div> 
< / div> 
 
< div class =control-group> 
< label class =control-labelfor =reading-off-peak> Off Peak< / label> 
< div class =controls> 
< input style =letter-spacing：10px; type =textid =reading-off-peakclass =input-medium> 
< / div> 
< / div> 
 
< / div> 
 
< div class =modal-footer> 
< button class =btndata-dismiss =modalaria-hidden =true>关闭< / button> 
< button class =btn btn-primary>洛奇阅读< /按钮> 
< / div> 
< / div> 
  

解决方案

解决此问题的方法是添加以下css bootstraps github问题）

  @media（max-width：480px）{
 
 .modal {
 height：500px; / *设置模态的默认最大高度（稍后调整）* / 
位置：固定; / *在屏幕中心显示模式* / 
 overflow-y：scroll; / *确保模式是可滚动的* / 
 -webkit-overflow-scrolling：touch; / *避免在iOS上使用2个手指滚动* / 
} 
 .modal.fade.in {
 top：5px; / *使用更多屏幕空间* / 
} 
 .modal-body {
 / *增加模态机构的最大高度以尝试&避免它，
 *和具有滚动条的模式容器会导致奇怪的行为* / 
最大高度：2400px; 
} 
} 
 
 / *现在调整高度，以便处理各种屏幕尺寸和方向* / 
 / *您可以根据自己的喜好制作细化图像，或者在普通屏幕尺寸
 *下更细化，但它应该从我们设置的高度开始.modal（即500px）& amp ; （max-width：480px）和（max-height：500px）{。modal {height：450px}} 
 @media（max-width：480px）and（max - 高度：450px）{.modal {height：400px}} 
 @media（max-width：480px）and（max-height：400px）{。modal {height：350px}} 
 @media （max-width：480px）和（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}} 
  

Hello want to know if i can get some help on this as i have not found anything on the net that will fix this issue, On the iphone the twitter bootstrap modal box when is to big the page has no scroll to get the the footer of the box.

code used

    <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>

解决方案

Fix for this is adding the following css (found on bootstraps github issues)

    @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}}

这篇关于iPhone上的模式框不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！