觸發錨點，打開模態並轉到模態內部的錨點

Question

我想做一件奇怪的事。 我將解釋一般情況，然后按照我想做的分步過程進行操作。 我在<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告訴模式重定向我，這就是為什么我嘗試使用錨點的原因

Answer 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