Question

因此，如果我有一个网站的href，我可以使用javascript在迷你窗口中显示URL的弹出窗口吗？

类似的东西：

<a href="http://example.com/uri" script="loadpageinwin(this.href)">site</a>
<script>function loadpageinwin(url) {
   // show a window about 1/2 the size of the screen
   // load URL into window
}
</script>

请原谅我的js代码，仍在学习，不知道在哪里寻找正确的方法和对象来打电话。

Answer 1

这是一个代码工作示例。

Codepen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* The Modal (background) */

    .modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 1;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }
    /* Modal Content/Box */

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      /* Could be more or less, depending on screen size */
    }
    /* The Close Button */

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- Trigger/Open The Modal -->
  <a id="link" href="http://www.w3schools.com/html/html_iframe.asp">W3Schools iFrame</a>

  <!-- The Modal -->
  <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">x</span>
      <iframe id="content" height="100%" width="100%"></iframe>
    </div>

  </div>
</body>
<script>
  // Get the modal
  var modal = document.getElementById('myModal');

  // Get the link that opens the modal
  var link = document.getElementById("link");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

  // When the user hovers over the link open the modal 
  link.addEventListener('mouseover', function(e) {
    modal.style.display = "block";
    console.log(e);
    document.getElementById("content").src = e.target.href;
  });

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

</html>

我可以将鼠标悬停在链接上并显示href引用的网站弹出窗口吗？

1 个答案: