javascript - 触发 anchor ，打开模态框并转到模态框内的 anchor

Question

我正在尝试做一件奇怪的事情。我将解释一般情况，然后按照我想要执行的步骤进行。我有一个 <ul> 内的项目列表。当我按下一个元素时，必须打开一个模式。在这个模态中，有与 <ul> 相同的元素。但详细解释了。当模式打开时，我希望我在 <ul> 中单击的元素将位于 modal body 的顶部。基本上是一个 anchor 。现在分步进行

项目列表 ( <li><a href="#some_element"></a></li> )我点击一个项目(点击我!)模式打开，显示 anchor

start_modal_body

<div id="some_element"></div>
<div id="not_this"></div>
<div id="not_this"></div>
<div id="not_this"></div>

end_modal_body

有什么想法吗？

编辑:

模式和其余代码位于两个单独的文件中

编辑2:

由于我使用的是淘汰赛，我无法使用 jquery 来告诉模态重定向我，这就是我尝试使用 anchor 的原因

Answer 1

如果您愿意重新排序模式内 anchor 部分的位置，而不是滚动到顶部，那么这里有一个仅 CSS 的答案，该答案可能会起作用。

将模式按钮包装在另一个元素上，然后使用该元素打开模式。然后链接内的 href 将用于定位适当的 anchor ...

<span data-target="#myModal" data-toggle="modal"><a href="#a" role="button" class="btn btn-primary">A</a></span>
<span data-target="#myModal" data-toggle="modal"><a href="#b" role="button" class="btn btn-primary">B</a></span>
<span data-target="#myModal" data-toggle="modal"><a href="#c" role="button" class="btn btn-primary">C</a></span>

<div id="myModal" class="modal fade" 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">×</button>
            </div>
            <div class="modal-body d-flex flex-column">
                <div id="a">
                    ..
                </div>
                <div id="b">
                    ..
                </div>
                <div id="c">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

并使用弹性盒顺序将目标部分移动到模式的顶部...

.modal-body > div:target {
    order:0;
}

.modal-body > div:not(:target) {
    order:1;
}

演示:https://www.codeply.com/go/HraCKrWHII