过滤模态弹出窗口无法正确显示

时间:2015-09-16 08:10:43

标签: javascript jquery twitter-bootstrap bootstrap-modal

我建立了以下网站:Website link

如果没有返回任何结果(你可以通过在状态下拉菜单中选择澳大利亚资本)到页面,那么作为bootstrap模式弹出窗口的过滤器很难显示,我的意思是你只看到它的一小部分如下所示:

http://res.cloudinary.com/dncu6pqpm/image/upload/v1442111067/searchpage_gjuljm.png

HTML

<div class="filter-toggle" data-toggle="modal" data-target="#filterModal"><i class="fa fa-filter"></i></div>

<div class="modal" id="filterModal" tabindex="1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button></div>
            <div class="modal-body">
                <!--Here goes filters dynamically pasted by jQuery-->
            </div>
        </div>
    </div>
</div>

的jQuery

<script type="text/javascript">
    var $filterToggle = $('.filter-toggle');
    //Filter Toggle / Showing Filters in Modal
    $filterToggle.click(function () {
        $('.shop-filters').appendTo($('#filterModal .modal-body'));
        $('#filterModal .modal-body .shop-filters').css('display', 'block');
    });

    $('#filterModal').on('hide.bs.modal', function () {
        $('.shop-filters').appendTo('.filters-mobile');
    });

    $(window).resize(function () {
        if ($(window).width() > 768) {
            $('#filterModal').modal('hide');
        }
    });
</script>

我正在努力抓住可能导致此问题的原因,现在在桌面上进行测试时,一切都按预期工作,但在iPad上表现得奇怪地显示在快照中

0 个答案:

没有答案