Я хотел бы связать iframe с кнопкой, чтобы я мог открыть нижеприведенный iframe (окно iframe / model), нажав кнопку «держать меня в курсе» на моем сайте: 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>

Я искал и искал и не могу найти ответ нигде.

0
chrish83 7 Янв 2017 в 05:12

3 ответа

Лучший ответ

Не уверен, что именно является конечной целью, но если вы хотите показать этот 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>
0
Michael Coker 7 Янв 2017 в 05:43

Что именно вы хотите? Адаптивный модальный вид здесь.

Если вы хотите отобразить модальное содержимое, аналогичный вопрос можно найти здесь здесь

Если вы хотите отображать только iframe, используйте jquery.

Или посмотрите Показать веб-сайт в модальном режиме

0
Community 23 Май 2017 в 11:53

Просто используйте <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') на тот случай, если вы хотите запустить свой CSS с #output{display:none;}.

0
StackSlave 7 Янв 2017 в 02:29