ボタンにiframeをリンクする方法がわかりません

Question

iframeをボタンにリンクして、iframe（iframe/modelウィンドウ）の下の「keep me posted」をクリックすると、私のサイトのボタン：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を表示するには、iframeをモーダルの要素に配置し、デフォルトで非表示にしてからshowボタンをクリックするとモーダルです。モデルを閉じるためのリンクも追加しました。あなたのニーズに合わせてモーダルの高さ/幅を調整することもできます。または、最終目標が何であるかを教えてください。私はそれを手助けすることができます。

$('.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

だけのjQueryを使用して、あなたは出力要素<iframe id='output'></iframe>を作成し、これを行うことができます...代わりに<input type='button' class='buttons' id='kmp' value='Keep Me Posted' />または類似のものを使用します。

$(function(){ 

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

} 

あなたはまたsrcが同様にいっぱい文書であることを確認する必要があります。私はそうではないと思う。 #output{display:none;}でCSSを開始したい場合に備えて、.css('display', 'block')を投げました。

Answer 3

あなたは正確に何をしたいですか？応答モーダルルックhere

については あなたが唯一のiframe使用jqueryのを表示したい場合は同様の質問がhere

あるモーダルコンテンツを表示したい場合。

またはDisplay website in modal