当我点击锚标记时，我需要导航到一个不同的页面&在该页面中，我需要使用Javascript显示一个模式

xdnvmnnf 于 2023-05-12 发布在 Java

关注(0)|答案(4)|浏览(111)

当我点击锚标签时，我需要导航到一个不同的页面，在该页面中，我需要显示一个模态。我怎么做呢？我已经尝试了很多方法，但Noting可以帮助我...有人能帮我吗？谢谢。
这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Shiva</h1>
    
    <a href="/something/121212"></a>
    
    <script>
        fetch('http://localhost:3000/data').then(res =>{
             return res.json()
        }).then(data =>{
            data.map(dating =>{
               const markup = ` <li>${dating.name}</li> `
               document.querySelector('a').insertAdjacentHTML('beforeend', markup)
            })
        })

        
    </script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/76214995/when-i-click-the-anchor-tag-i-need-to-be-navigated-to-a-different-page-in-that

4条答案

按热度按时间

rn0zuynd1#

以下是您的用例的答案。
让我们假设代码中有一个主页，其中有一个指向配置文件页面的锚标记。您需要在配置文件页面加载后立即显示模态。
让我们假设您使用锚标记从当前页面导航到profile.html。然后你的profile.html看起来像这样。

<!DOCTYPE html>
<head>
  <title>Profile</title>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous"
  />
</head>
<body>
  <!-- Modal -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->

  <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"
  ></script>
  <script>
    window.addEventListener("DOMContentLoaded", function () {
      $("#exampleModal").modal("show");
    });
  </script>
</body>

这里的主要捕获是eventListener，它检查DOM是否已加载，然后触发一个JavaScript事件来显示模态。

window.addEventListener("DOMContentLoaded", function () {
  $("#exampleModal").modal("show");
});

请参考此代码片段以获取使用jQuery & Bootstrap模式的参考。根据您的需要重新加工。

赞(0）回复(0）举报 2023-05-12

hkmswyz62#

我认为首先删除锚标签上的href。然后在锚标签上使用onClick。因为href会直接重定向到提供的url

赞(0）回复(0）举报 2023-05-12

ctrmrzij3#

你可以使用bootstrap modal并通过Javascript触发它。下面是一个示例代码：

var myModal = new bootstrap.Modal(document.getElementById('exampleModalToggle'));
    myModal.show();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> 

 <!-- Modal Trigger through Button -->

<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

  <!-- Modal -->
  <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Show a second modal and hide this one with the button below.
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
        </div>
      </div>
    </div>
  </div>

我在页面加载时触发了模式。你可以随意调整。希望对大家有帮助。

赞(0）回复(0）举报 2023-05-12

2nc8po8w4#

请参见下面的示例：
在查询参数上添加一个标识符，如openModal=true，以便您可以跟踪要打开模式的页面。我想你不需要每次访问页面时都打开模态。

<a href="/something/121212?openModal=true">Click here</a>

现在，在单击链接后重定向的页面上，当页面完全加载时，获取查询参数

<script>
  window.onload = (event) => {
  const urlParams = new URLSearchParams(window.location.search);
  const shouldOpenModal = urlParams.get("openModal");

  if (shouldOpenModal == "true") {
    // open your modal
  }
};
</script>

如果我总结了解决方案，在你想要显示模态的页面上，等待页面完全加载。然后显示模态。
openModal=true查询参数只是跟踪你是否想通过点击你创建的锚标记的特定链接来打开模态，而不是当你以其他方式访问页面或其他链接时。如果每次访问页面时都希望显示模式，则可以避免查询参数和条件检查。

赞(0）回复(0）举报 2023-05-12

我来回答

当我点击锚标记时，我需要导航到一个不同的页面&在该页面中，我需要使用Javascript显示一个模式

4条答案

相关问题

热门标签

最新问答