触发锚点,打开模态并转到模态

时间:2018-04-23 13:30:14

标签: javascript html bootstrap-4 bootstrap-modal

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

项目清单(<li><a href="#some_element"></a></li>) 我点击一个项目(点击我!) 模态打开,显示锚

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告诉模态重定向我,这就是我尝试使用锚点的原因

1 个答案:

答案 0 :(得分:1)

这是一个仅限CSS的答案,如果您可以重新排序模式中锚点部分的位置,而不是滚动到顶部,则可能会有效。

将模态按钮包裹在另一个元素上,使用该元素打开模态。然后链接中的href将用于定位适当的锚点...

<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>

并使用flexbox命令将目标部分移动到模态顶部...

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

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

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