javascript - 生成可打开链接模式窗口的可嵌入代码

Question

我正在为我的用户创建一个网站印章，以便将其放入网站。目前我能够生成看起来像按钮的简单 html/css 链接，点击它会重定向到我的登录页面。

<a href="http://www.example.com/seal/1e047f70-948c-4d40-a47f-0a15c59fc243">
  <span style="box-shadow: #9AC985 0px 1px 0px 0px inset; 
               border: 1px solid #3B6E22; 
               display: inline-block; 
               cursor: pointer; 
               color: #FFFFFF; 
               font-family: Arial; 
               font-size: 14px; 
               font-weight: bold; 
               padding: 8px 16px; 
               text-decoration: none; 
               background: linear-gradient(#74AD5A , #68A54B ,#74AD5A);">
  MY SITE SEAL
  </span>
</a>

要求是，而不是在同一标签或新标签中打开链接。我希望它像模式一样弹出，并在模式窗口中显示我的登录页面。

注意:我的用户可能安装了也可能没有安装 bootstrap jquery 或任何其他库，挑战是生成的代码不能依赖于这些库，但可以肯定的是我们可以使用 java-script 和/或 css连同 HTML。

Answer 1

好吧，很简单，您可以像这样创建自己的模态窗口...(纯 CSS、JS)

var modal = document.getElementById("modal");
modal.onclick = function () {
  modal.style.display = "none";
}
var modalIframe = modal.getElementsByTagName("iframe")[0];
modalIframe.onclick = function () {}
function showModal ( url ) {
  modalIframe.src = url;
  modal.style.display = "block";
}

.linkToModal{
  box-shadow: #9AC985 0px 1px 0px 0px inset; 
  border: 1px solid #3B6E22; 
  display: inline-block; 
  cursor: pointer; 
  color: #FFFFFF; 
  font-family: Arial; 
  font-size: 14px; 
  font-weight: bold; 
  padding: 8px 16px; 
  text-decoration: none; 
  background: linear-gradient(#74AD5A , #68A54B ,#74AD5A);
}
#modal{
  display:none;
  background:rgba(0, 0, 0, 0.5);
  position:absolute;
  top:0;bottom:0;left:0;right:0;
}
#modal iframe{
  position:absolute;
  width: 80%;
  height: 80%;
  top:0;bottom:0;left:0;right:0;margin: auto;
}

<a class="linkToModal" onclick="showModal('http://www.example.com/seal/1e047f70-948c-4d40-a47f-0a15c59fc243')">MY SITE SEAL</a>
<div id="modal"><iframe src=""></iframe></div>