Question

我正在尝试使用bootstrap 3构建一个模态窗口，该窗口将用作“ImageViewer”，用户可以在其中垂直滚动大图像。

在此ImageViewer的左侧，我希望附加图像的小缩略图，以便用户始终可以快速在图库中的图像之间跳转。我试图在一个简单的html页面中做到这一点并且它工作得很好，但是只要我将相同的html代码放在模态窗口中，词缀就会停止工作。

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <!-- This div container should be affixed when scrolling the images -->
                            <div class="sidebar affix">
                                <a href="#img1">
                                    <img src="//placehold.it/50x50/2255EE/EEE&text=1" alt="" /></a>
                                <a href="#img2">
                                    <img src="//placehold.it/50x50/2255EE/EEE&text=2" alt="" /></a>
                                <a href="#img3">
                                    <img src="//placehold.it/50x50/2255EE/EEE&text=3" alt="" /></a>

                            </div>
                        </div>

                        <div class="col-md-9" role="main">
                            <img id="img1" src="//placehold.it/600x450/2255EE/EEE&text=1" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img2" src="//placehold.it/600x450/2255EE/EEE&text=2" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />

                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

我在这里创造了一个小提琴：http://jsfiddle.net/R8D2v/

任何人都可以帮忙吗？

最好的问候Niclas

Answer 1

您可以在要滚动的区域设置已定义的高度：

    .row{
        height: 600px;
        }
    .col-md-9{
        height:600px;
        overflow-y:scroll;    
    }

小提琴：http://jsfiddle.net/R8D2v/1/

Answer 2

您不手动添加类附加。当你实现'data-offset-top'或'data-offset-bottom'参数时，affix函数通过切换.affix，.affix-top和.affix-bottom类来工作。

手动分配词缀类是在功能上设置固定在元素上的位置，这就是为什么当不使用模态时它不会移动。当然，它会/永远/移动，因为它的定位没有逻辑。

可以在bootstrap site上找到相应的词缀语法。

<div data-spy="affix" data-offset-top="200">...</div>

不幸的是，当你滚动它不是文档，而是通过溢出的模态。我的猜测是监视前者。我创建了一些模仿这个edited fiddle中的行为的jquery。通过检查页面，您可以看到当您滚动浏览jquery中定义的点时，.affix类被添加到.sidebar。我留给你适当地定位元素（使用位置：固定）。

$('.modal').on('scroll', function(){
    var someThreshold = 60;

    if ($('.modal').scrollTop() > someThreshold) {
       $('.modal .sidebar').addClass('affix');
    }
    else {
       $('.modal .sidebar').removeClass('affix');
    }
});

旁注：当发布小提琴时，请确保使用'col-xs- *'，因为使用'col-md- *'会导致元素在不可避免的狭窄“结果”窗格中折叠成单个列。

Answer 3

尝试为模态添加一些样式。

style="position:absolute;overflow:hidden"

Demo

带有Affix的Bootstrap 3模态窗口？

3 个答案: