<a href >單擊鏈接</a>時顯示彈出窗口

Question

我只想創建一個帶有按鈕的 URL，當它點擊它時，它必須顯示一個包含我的消息的對話框。 有什么辦法可以在 HTML 中實現嗎？ 已經在google上搜索過了，作為初學者我不是很懂。 所以一個簡單的教程可能對我有幫助。

鏈接應該像www.google.com/webpage/#popup

對話框必須顯示在屏幕中央。

Answer 1

帶有一個函數的onClick ：

<script type="text/javascript">
function AlertIt() {
  alert("ATTENTION! THIS IS AN ALERT");
}
</script>

<a href="javascript:AlertIt();">click me</a>

復雜的單線：

<a href="http://example.com/"
 onclick="return alert('Please click on OK to continue.');">click me</a>

Answer 2

您可以使用hashchange事件！
創建一個檢查散列函數並在初始時調用它，這樣加載帶有散列的 URL 的行為與在頁面上更改散列的行為相同。

您可以創建一個數組，其中包含應該“偵聽”此類hashchange的元素的 ID，並在它們的 ID 等於散列時給它們一個特定的類（例如.hash-selected ）。

 const hashes = ["#popup"]; // List of IDs that are "listening" let lastHash = ""; function checkHash() { if (hashes.includes(lastHash)) // Remove class from last selected element document.querySelector(lastHash).classList.remove("hash-selected"); if (hashes.includes(location.hash)) // Add class to current selected element document.querySelector(location.hash).classList.add("hash-selected"); // Save current hash as 'lastHash' for first if-statement when calling 'checkHash()' again lastHash = location.hash; } checkHash(); // Initial function-call for same behavior on "page-open" window.addEventListener("hashchange", () => checkHash());

 body {margin: 0} #popup { position: absolute; border-bottom: 1px solid black; width: 100%; transform: translateY(-100%); background: lightgreen; } #popup.hash-selected {transform: translateY(0)}

 <div id="popup"> <p>Some sample text</p> <a href="#">Close</a> </div> <a href="#popup">Open popup</a>

我們甚至可以輕松地使用具有特定類的元素的 ID 填充hashes .hash-listen ，例如.hash-listen ：

const hashes = [];
for (let el of document.querySelectorAll(".hash-listen"))
  hashes.push("#" + el.id);

// ...

邊注
要從瀏覽器歷史記錄中刪除哈希更改，您應該查看演示history.replaceState() -function 的答案。

Answer 3

 <a href="https://stackoverflow.com/" onclick="myAlert()">Click Here</a> <script> function myAlert() { alert('hello there!'); } </script>