相关疑难解决方法(0)

我正在使用Bootstrap在一个网站上工作并遇到一个我似乎无法解决的问题.这是该网站的草稿.

在"我们做什么"面板上,我在第一个缩略图框上创建了一个可点击的模态窗口(缩略图下显示"企业软件开发").如果单击非移动设备上的缩略图,将弹出模式窗口.

在台式计算机(或笔记本电脑)上,它工作得很好.但是在iOS(iPhone,iPad等)上它根本不起作用:即点击它不会调出模态窗口.

但是,如果您在"我们是谁"面板的页面上看起来较低,则会显示"查看更多关于Tim ..."按钮.如果您单击或点击该按钮,它将适用于所有设备(包括iOS).

我可以在两者之间看到的唯一区别是第一个在<div>标签上,而第二个在<button>标签上.

Bootstrap不支持从<div>iOS设备上启动模态窗口吗？如果是这样,您是否看到我的代码有任何问题会导致它仅在iOS设备上失败？

你好想知道我是否可以得到一些帮助,因为我没有在网上找到任何可以解决这个问题的东西,在iphone上的twitter bootstrap模式框什么时候是大页面没有滚动来获取页脚盒子.

使用的代码

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

Bootstrap模态淡入淡出功能在Chrome/Internet Explorer上完美运行,但它无法在iPhone/Safari上运行.有人解决这个问题吗？

<div class="modal fade" id="notice" tabindex="-1" role="dialog" aria-labelledby="notice" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="https://random.hellyer.kiwi/files/2013/11/wiley-coyote-help.jpg" />
                | wait, I'm updating...
            </div>
        </div>
    </div>
</div>

<script>
    $('#notice').modal('show');
    setTimeout(function () {
        $('#notice').modal('hide');
    }, 3000);
</script>

https://jsfiddle.net/mmbtfhaf/