Bootstrap Blueimp gallery无法在移动分辨率中打开模态

Question

我在Zend Framework 1项目的两个区域中使用Blueimp Gallery图库。虽然它在一个部分完美运行，但我遇到了另一个问题。

问题部分适用于桌面分辨率，但当我缩小浏览器宽度以测试移动分辨率时，单击图像不再打开模式。

与下面的工作代码的唯一区别在于构建模态内容的PHP循环位于不同的div和section中。

<div class="col-12 col-md-8">
    <section>
        //the php for each is inside a section.
    </section>
</div>

有人可以指出这导致问题的原因吗？

工作部分的代码全部在正文中，如下所示：

<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="photos">
    <?php if ($this->project['photos']): ?>
        <?php foreach ($this->project['photos'] as $photo): ?>    
            <div class="col-md-3 col-sm-4 col-xs-6">
                <a href="<?php echo $photo['resized'] ?>" class="item" title="<?php echo $photo['description'] ?>" data-gallery data-id="<?php echo $photo['id']; ?>">
                    <div class="thumb">
                        <img src="<?php echo $photo['src'] ?>" alt="<?php echo $photo['description'] ?>">
                        <div class="description">
                            <!-- leave space even if no description so each cell is of equal height-->
                            <span><?php echo isset($photo['description']) ? $photo['description'] : '&nbsp;&nbsp;'; ?>
                        </div>
                    </div>
                </a>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>    
</div>

    <script src="/js/common/jquery.blueimp-gallery.min.js"></script>
    <script src="/js/common/bootstrap-image-gallery.min.js"></script>

Answer 1

这里没有足够的信息供任何人提供解决方案，除非他们从之前的头痛中认识到它。经过数小时的挫折后，这才变得明显。

这是一个非常烦人的问题，解决方案很简单。当分辨率宽度减小时，标签和地址部分被移动到页面的底部，但它们的部分起点恰好在“项目照片”之后。标题部分。结果他们阻止了所有鼠标事件。调整相册容器的z-index解决了这个问题。

图像有助于说明发生了什么，我希望我的指责可以帮助其他人。