4

我正在尝试使用 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/

任何人都可以帮忙吗？

最好的问候尼古拉斯

4

3 回答 3

2

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

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

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

于 2013-09-19T18:16:01.877 回答
2

您无需手动添加类词缀。affix 函数通过在满足 'data-offset-top' 或 'data-offset-bottom' 参数时切换 .affix、.affix-top 和 .affix-bottom 类来工作。

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

可以在引导站点上找到适当的词缀语法。

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

不幸的是，当您滚动时，它不是文档，而是通过溢出的模式。我的猜测是词缀监视器前者。我创建了一些 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-*”会导致元素在不可避免的狭窄“结果”窗格中折叠成一列。

于 2013-09-28T17:59:48.397 回答
0

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

style="position:absolute;overflow:hidden"

演示

于 2013-09-19T18:22:17.590 回答