[英]Show popup when <a href >link clicks
I just want to make a URL with a button when It clicks it must show a dialog with my message.我只想创建一个带有按钮的 URL,当它点击它时,它必须显示一个包含我的消息的对话框。 Is there any way to achieve in HTML?.
有什么办法可以在 HTML 中实现吗? Already searched google, as a beginner I don't understand much.
已经在google上搜索过了,作为初学者我不是很懂。 So a simple tutorial might help me.
所以一个简单的教程可能对我有帮助。
the link should be like www.google.com/webpage/#popup链接应该像www.google.com/webpage/#popup
dialog must be shown in the center of the screen.对话框必须显示在屏幕中央。
onClick
with a function:带有一个函数的
onClick
:
<script type="text/javascript">
function AlertIt() {
alert("ATTENTION! THIS IS AN ALERT");
}
</script>
<a href="javascript:AlertIt();">click me</a>
Complex single one-liner:复杂的单线:
<a href="http://example.com/"
onclick="return alert('Please click on OK to continue.');">click me</a>
You can make use of a hashchange
-event!您可以使用
hashchange
事件!
Make a check-hash function and call it initially, so that loading the URL with the hash has the same behavior as changing the hash when already on-page.创建一个检查散列函数并在初始时调用它,这样加载带有散列的 URL 的行为与在页面上更改散列的行为相同。
You could create an array holding the IDs of the elements that should "listen" for such a hashchange
, and give them a specific class (eg .hash-selected
) when their ID equals the hash.您可以创建一个数组,其中包含应该“侦听”此类
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>
We could even easily fill the hashes
-array with IDs of elements that have a specific class, like .hash-listen
:我们甚至可以轻松地使用具有特定类的元素的 ID 填充
hashes
.hash-listen
,例如.hash-listen
:
const hashes = [];
for (let el of document.querySelectorAll(".hash-listen"))
hashes.push("#" + el.id);
// ...
Sidenote边注
To remove hashchanges from the browser-history, you should take a look at this answer that demonstrates the history.replaceState()
-function .要从浏览器历史记录中删除哈希更改,您应该查看演示
history.replaceState()
-function 的答案。
<a href="https://stackoverflow.com/" onclick="myAlert()">Click Here</a> <script> function myAlert() { alert('hello there!'); } </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.