具有不同 Web 链接的弹出式模态 iframe

Question

我已在网上查找此信息并已接近，但这并不是我真正需要的，我不确定是否可以这样做？所以我想我会问你吗？？

在我的主要搜索页面上，我有很多 HTML 链接，这些链接来自服务器上的数据库以及指向不同网站的链接。 （目前链接通过目标自身直接转到那里的网站）

所以我想做的是当你点击链接时它

使用网站本身加载模型弹出窗口和 iframe，而不是直接访问该网站并离开 mysite。然后按灰色区域或 X 删除它，然后显示主页。

正如我所说，我已经接近了，即让模型弹出窗口工作但链接不起作用

希望您能建议最好的方法是什么？

谢谢

提姆

Answer 1

使用 target 和 iframe 的名称。模态应该显示为onClick="showModal()"。

只需确保您可以通过 CORS 访问这些网站。 SO Question about that

function showModal()
{
  $('#modal').show();
}

function hideModal()
{
  $('#modal').hide();
}

#modal {
  position: fixed;
  left: 10%;
  top: 10%;
  height: 300px;
  width: 80%;
  background-color: white;
  display: none;
}

.close {
  position: absolute;
  right: -5px;
  top: -5px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
  text-align: center;
}

iframe {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal">
  <div class="close" onClick="hideModal()">&times;</div>
  <iframe name="modal_iframe" src="demo_iframe.htm"></iframe>
</div>

<a href="https://stackoverflow.com" target="modal_iframe" onClick="showModal()">Stack Overflow</a><br/>
<a href="https://www.w3schools.com" target="modal_iframe" onClick="showModal()">W3</a>