Question

当我点击我的UL中的链接时，我会尝试制作它，它会在弹出框中打开一个带有几行文字的简单弹出框。

  <ul>
   <li><a href="#introduction">About</a></li>
   <li><a href="#one">Portfolio</a></li>
   <li><a href="#">Contact</a></li>                 
   <li><a href="#">Resume</a></li>
  </ul>

所以这是我的UL代码。我希望有人点击＆＃34;联系＆＃34;它不会将其链接到网站或其他页面，而是打开一个弹出框，我可以将一些联系信息放入。

谢谢！

Answer 1

您需要将事件click绑定到该链接。
单击时防止该链接的默认行为。

document.getElementById("contact").onclick = function(e) { // bind the event click.
  e.preventDefault(); //Prevent the default behavior 
  alert('Some information from: ' + this.innerText + '\n\n Details:\n\n Ele from Earth!');
}

<ul>
  <li><a href="#introduction">About</a></li>
  <li><a href="#one">Portfolio</a></li>
  <li><a href="#" id="contact">Contact</a></li>
  <li><a href="#">Resume</a></li>
</ul>

Answer 2

<ul>
<li><a href="#introduction">About</a></li>
<li><a href="#one">Portfolio</a></li>
<li><a href="#" onClick="a()">Contact</a></li>
<li><a href="#">Resume</a></li>
</ul>

<script>
function a () {
var contact = prompt("Add the contact.");
}
</script>

这将添加一个弹出框。剩下的工作就在于你。您可以选择是否要使用变量联系人的值在屏幕上显示或通过表单提交。

单击ul链接打开弹出窗口

2 个答案: