我想不出如何将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>

​

Answer 2

只需使用<input type='button' class='buttons' id='kmp' value='Keep Me Posted' />或类似的东西.然后，您可以创建一个输出元素<iframe id='output'></iframe>，并使用jQuery执行此操作：

$(function(){

$('#kmp').click(function(){
  $('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}

}

您还需要确保src也是一个完整的文档。我看不出来。我加入了那个.css('display', 'block')，以防您想要用#output{display:none;}启动CSS。

Answer 3

你到底想要什么？如需响应模态，请参阅这里

如果要显示模态内容，类似的问题是这里

如果只想显示iframe，请使用jquery。

或者看看模态显示网站