如何在弹出窗口 window 上添加锚点 link 以在同一弹出窗口 window 内的部分之间跳转

Question

我正在使用弹出窗口 window 调用搜索面板，其中包含包含搜索结果的部分。因此，我正在尝试添加带有锚点 link 的按钮，以便在此弹出窗口 window 上更快地导航，因为此搜索可以包含带有滚动条的长结果列表。

这是 SearchPopup 模板中的代码

<div><a href="#Unit-link">Unit</a></div>
<h4 id="Unit-link">Unit</h4>

因此，当我像代码示例中那样添加锚点时，生成的 link 是调用弹出窗口而不是弹出窗口本身的页面 link。所以它看起来像：

默认页面
-- 搜索弹出窗口
-- SearchPopup

我希望它生成 SearchPopup#Unit-link,
但它会生成 DefaultPage#Unit-link

请帮忙！谢谢。

Answer 1

我发现你已有的东西可以工作。您可能需要澄清的唯一想法是 "pop-up" 这个词。如果您的意思是 "modal"，那么此解决方案将起作用。我会制作一个片段，这样你就可以自己尝试一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div style="height: 250px;" class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <a href="#1">Jump to section 1</a><br />
        <a href="#2">Jump to section 2</a><br />
        <a href="#3">Jump to section 3</a><br />
        <div id="1"class="modal-body">
          <p>1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div id="2" class="modal-body">
          <p>2Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div id="3"class="modal-body">
          <p>3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

这里的内部link在模态的顶部，模型需要比里面的内容短，否则永远不会有内容的滚动条，这意味着 link 永远不会跳转到该部分。尝试一下以获得所需的结果。

干杯！

如何在弹出窗口 window 上添加锚点 link 以在同一弹出窗口 window 内的部分之间跳转

How to add an anchor link on a popup window to jump between sections inside of the same popup window

html

css

anchor

hyperlink

popupwindow