js ポップアップレイヤーは常に実装のアイデアとコードが中央に配置されます

著者：Eve Cole 更新時間：2025-03-03 01:32:01

ポップアップウィンドウは常に中央に表示されます

次のようにコードをコピーします。

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=function(){

if(isIE){

window.onscroll=doIE;

window.onresize=doIE;

関数 doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

var oDiv=document.getElementById("oneReply");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px'; </script>

まず第一に、誰もが互換性のない CSS スタイルposition:fixed; を理解する必要があります。

Position 属性には、静的、絶対、固定、相対の 4 つのオプションの値があります。

それぞれの使い方を一緒に学び、どのようなレイアウトでどちらを使用するかを考えてみましょう。

Position:static 位置指定なしこの属性値は、すべての要素のデフォルトの位置指定です。通常の状況では、特に宣言する必要はありませんが、継承が発生した場合、要素によって継承された属性の影響を確認したくない場合があります。 . 自体なので、position:static を使用して継承をキャンセル、つまり要素の位置決めのデフォルト値を復元できます。例: #nav {position:static; } 前に述べた他の 2 つは、主に固定位置について説明しています。要素は絶対と同様に配置されますが、その要素を含むブロックはビューポート自体です。 Web ブラウザなどの画面メディアでは、ドキュメントがスクロールされても要素はブラウザビュー内で移動しません。たとえば、フレームスタイルのレイアウトが可能になります。印刷物などのページ媒体では、最初のページの同じ位置に固定要素が表示されます。これを使用して、流れるようなタイトルや脚注を生成できます。同様の効果を確認しましたが、そのほとんどは CSS ではなく、JS スクリプトを使用して実現されています。 IE6はサポートされていないので注意してください...

ここでは、position:fixed + "hack technology" + "javascript" を使用してこの問題を解決します。

次のようにコードをコピーします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

<頭>

< メタ http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tusheng フロントエンドエンジニア</title>

< style type="text/css">

ボディ、div{マージン:0;}

#a{幅:200px;高さ:200px;背景:青;位置:固定;左:50%;上:50%;マージン左:-100ピクセル;マージン上:-100ピクセル;_位置:絶対;}

</ /スタイル>

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=function(){

if(isIE){

window.onscroll=doIE;

window.onresize=doIE;

関数 doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var width=document.documentElement.clientWidth;

var height=document.documentElement.clientHeight;

var oDiv=document.getElementById("a");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px';< /script>

</head>

<本文>

< /body>

< /html>

js ポップアップ レイヤーは常に実装のアイデアとコードが中央に配置されます

js ポップアップレイヤーは常に実装のアイデアとコードが中央に配置されます