javascript - 我不知道如何将 iframe 链接到按钮

Question

我想将一个 iframe 链接到一个按钮，这样我就可以通过单击我网站上的“让我发布”按钮打开下面的 iframe(iframe/模型窗口):http://www.aphealthnetwork.com .

iframe 代码:

<iframe  width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>

按钮代码:

<div class="buttons"><a href="https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2" class="solid">Keep Me Posted!</a> or <a href="index.html#pricing" class="inline scroll">learn more</a></div>

我一直在寻找和寻找，但在任何地方都找不到答案。

Answer 1

不确定最终目标到底是什么，但是如果你想在点击按钮时在模式中显示 iframe，你可以将 iframe 放在模式元素中，默认情况下隐藏它，然后显示单击按钮时的模态。我还添加了一个链接来关闭模型。您可能也想调整模式的高度/宽度以满足您的需要。或者让我知道最终目标是什么，我可以提供帮助。

$('.buttons a').on('click',function(e) {
  if ($(window).width() > 820) {
    e.preventDefault();
    $('#modal').show();
  }
});

$('.close').on('click',function(e) {
  e.preventDefault();
  $('#modal').hide();
})

#modal {
  display: none;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

iframe {
  position: absolute;
  top: 1em; left: 50%;
  transform: translate(-50%,0);
}

.close {
  position: absolute;
  top: 1em; right: 1em;
  background: black;
  color: white;
  padding: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons"><a href="https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2" class="solid">Keep Me Posted!</a> or <a href="index.html#pricing" class="inline scroll">learn more</a></div>


<div id="modal">
  <a class="close" href="#">close</a>
  <iframe  width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>