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）

＆＃13;

'ss%s' % self.xx

＆＃13;

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";
}

＆＃13;

.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;
}

＆＃13;

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

1 个答案: