Question

我想将iframe链接到一个按钮，这样我就可以打开下面的iframe（iframe /模型窗口），点击＆＃34;让我发布＆＃34;我网站上的按钮：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

只需使用<div class="tile"> My code </div>或类似的东西......然后你可以使用jQuery创建输出元素div.tile { background: url('../images/tiles-min.png'); background-size: 100% 100%; background-size: cover; background-position: center; padding:0.2em 0.2em; width:70%; height: 550px; display: table; }并执行此操作：

<input type='button' class='buttons' id='kmp' value='Keep Me Posted' />

您还需要确保<iframe id='output'></iframe>也是完整文档。我发现事实并非如此。我投入了$(function(){ $('#kmp').click(function(){ $('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'); } }以防你想用src启动你的CSS。

Answer 2

不确定最终目标是什么，但是如果你想在点击按钮时在模态中显示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 3

你到底想要什么？对于响应模式外观here

如果您想显示模态内容，类似的问题是here

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

或者查看Display website in modal

我无法弄清楚如何将iframe链接到按钮

3 个答案: