0

私は Web 開発にかなり慣れていないので、すべてのことを独学で学んでいます。jqueryによって呼び出されるcssとjavascriptのポップアップを持つページがあるiframeがあります。リンクが押されると、次のページに移動する前に、背景が影付きのポップアップ ウィンドウに表示されます。これは私のJavaScriptコードです:

$SearchListings.on("click", "a", function (e) {
     e.preventDefault();
     href = e.target.href;
     itemnum = getItemNum(href);
     var dataString = //urlhere
     $.get(dataString, function (data) {
         $linkShade.fadeIn();
         $linkModal.html(data).delay(500).fadeIn();
         Galleria.loadTheme('js/galleria.classic.min.js');
         $('#galleria').galleria({ lightbox: true });
     });
 });

 $linkShade.on("click", closeModal);
 $linkModal.on("click", ".modalCancel", closeModal);

 $linkModal.on("click", ".modalBtn", function (e) {
     e.target.href = href;
 });`

これは関連するcssです

#linkModal {
background: white;
border: 10px solid black;
bottom: 0;
color: black;
display: none;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
height: 700px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 800px;
overflow: scroll;

}

私の質問は、ポップアップを表示して、ページ上のユーザーの位置が iframe の中央にない画面の中央に配置するにはどうすればよいかということです。これが説明が不十分である場合は申し訳ありません。これは私の最初の投稿です。ほとんどの場合、私はここに来て答えを見つけ、何も投稿する必要はありません。できれば助けてください。ありがとう！

編集＃1：これがjsfiddleです

4

1 に答える 1

1

残念ながら、JavaScript を介して値を設定するために、iFrame の親ページから画面サイズなどのコンテンツにアクセスすることはできません。また、子ページの css は、iFrame を含むウィンドウの解釈された「画面サイズ」にのみ関連します。

固定レイアウトを使用している場合は、画面サイズをクエリ文字列パラメーターとして iFrame ページに渡すことができます。

var $iframe = $("#myIframe");
$iframe.attr("src", "iFrame.html?parentHeight=" + $(window).height() 
                                    + "&parentWidth=" + $(window).width() 
                                    + "&iFrameHeight=" + $iframe.height()
                                    + "&iFrameWidth=" + $iframe.width();

次に、モーダル ダイアログの位置を設定して中央に表示するために、子ページの読み込み時に計算を行うことができますが、それでも iFrame に含める必要があります。

于 2013-03-27T16:24:30.877 に答える