Question

我有一个小箭头元素，它是Bootstrap模态的一部分，并指向触发模态打开的元素。

这很好用。但是，如果模态很长并且需要用户滚动，则箭头元素不再保持静止，指向触发元素。这意味着我必须将箭头放在.modal-dialogue div之外，这意味着它会挂在页面的左侧。

有人会知道我如何定位箭头以使其始终位于模态旁边吗？

HTML：

<div class="modal fade in" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        CONTENT
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    <div class="modal-arrow"></div>
</div><!-- /.modal -->

CSS

.modal-content {
  height: 800px;
    width: 400px;
    margin-left: 40px;
}

.modal-arrow {
    content: "";
    display: block; 
    position: fixed;
    top: 60px;
    bottom: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 35px 25px 0;
    border-color: transparent #ffffff transparent transparent;
    -webkit-filter: drop-shadow(-2px 0px 1px rgba(0,0,0,.5));
    -moz-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
}

Answer 1

查看我的小提琴fork。

注意事项：

删除top: 50vh; transform: translateY(-50%);以定位箭头
将此添加到.modal-arrow类： vh

如果您不知道，margin-top代表视口高度。值50表示可用视口高度的一半。我添加了translateY（-50％）以更精确地对齐垂直空间中的箭头对象。翻译是一种更清晰，更现代的垂直居中方式，是使用否定{{1}}的良好替代品。

Chrome / Mac 49.0.2623.112

Answer 2

你试过这个......

JavaScript

检查小提琴：https://jsfiddle.net/umv4jhLg/6/

Answer 3

首先，必须像在静态示例中那样将它们分开。但是，当窗口水平调整大小时，您也希望将它们保持在一起，而不是使用基本方法将它们分别放入列中

<div class="col-xs-2">
    <div class="modal-arrow" id="left">

    </div>
</div>

<div class="col-xs-10" id="right">
        <div class="modal-dialog">
        ...
        </div>
</div>

箭头固定时，最好继承它的宽度，而不是尝试正确修复它，对于边框交叉点，箭头优先。

#left {
   width: inherit;
   z-index: 1;
   left: 17px;
}

并删除边距的左侧部分

$('#right').find('*').css('margin-left', '0');

Here是工作小提琴手。

将元素定位在Bootstrap模式旁边

3 个答案: