如何在同一页面上打开不同的模态窗口

Question

我在页面上有几个链接。我想为每个链接创建一个模态警报窗口，让人们知道他们要离开网站。 （这是我们网站的要求。）我使用的代码只允许在页面上打开一个模态。你能帮我弄清楚如何为每个链接打开不同的模态吗？

这是javascript：

function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

HTML：

<p><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>

模态的HTML：

<div id="overlay">
 <div>
      <p align="left">You are about to leave the website.</p>
      <p align="left"><a href="http://www.google.com"></a></p>
      <p align="left">Click here to <a href='#' onclick='overlay()'>cancel</a></p>
 </div>