ライトボックス/ divポップアップを配置して、iframeのビューポートの中央に来るようにするにはどうすればいいですか？

Question

ライトボックス/ divポップアップをiframe内のビューポートの中央に配置するにはどうすればよいですか？

iframeは別のドメインのHTMLに埋め込まれています。

Answer 1

以下のすべての変更は、iframeに読み込まれているページを参照しています。

まず、ドキュメントの本文の下部にdivを追加します。あなたはモーダルを使用したいとき

var body = $('body')[0]; 
$(body).append("<div id='modal' style='position:absolute;display:none;'></div>"); 

次に、（関数内の）次のコードを実行します。

// to position it, do the following 
var body = $('body')[0]; 

// get the position and size info on the iframe 
var height = $(body).height(); 
var width = $(body).width(); 

// get the size information on the modal div 
var divHeight = $('#modal').height(); 
var divWidth = $('#modal').width(); 

// put it together to get the proper position 
var top = (height/2)-(divHeight/2); 
var left = (width/2)-(divWidth/2); 

// set it and we're done, hiya! 
$('#modal').css('top', top); 
$('#modal').css('left', left); 

// show the div 
$('#modal').css('display', 'block'); 

注二つ

1. あなたはモーダルのdivを追加する必要があります体の要素に人生をより簡単にするために
2. モーダルは絶対的な位置を取るべきです - 私はそれをインライン

はちょっとショット:)