任意のhtmlドキュメントの目立たないオーバーレイを作成する

私は、既存のDOMノードにアタッチし、そのコンテンツエリア全体をカバーするオーバーレイを作成しようとしています。これは、このノードがページの本体であるか、深くネストされたdivであるかに関係なく機能します。私がオーバーレイしているページのレイアウトは変わらないことが重要です。最終的に、私のコードは、既存のhtmlページの上にブラウザの拡張機能として実行されます。任意のhtmlドキュメントの目立たないオーバーレイを作成する

文書の本文内に直接ネストされたテキスト（またはスペースを取るもの）でページをオーバーレイしようとする非常に単純なケースで問題が発生しました。私は体の別の子ノードとしてオーバレイdivを追加し、絶対位置とその幅/高さを100％に設定する以外に選択肢はありません。もちろん、ボディが静的に配置されている場合（デフォルト）、divはボディのコンテンツではなくビューポートのサイズになります。コンテンツがオーバーフローした場合、私のオーバーレイはすべてをカバーしません：\。

他の回答はすべて、親div（私の場合は本文）の位置を設定して、それを位置決めコンテキストとして定義することをお勧めします。しかし、私はこれを行うことはできません。例えば、ドキュメントボディの位置を「相対」に変更すると、ボディのコンテンツのレイアウトが変更され、邪魔にならないオーバーレイの目的を破ることができます。何をすべきか？

拡張機能固有の提案は大歓迎です。参考までに、拡張機能はChrome用です。

jsfiddleは、オーバーレイする必要のある仮説ページです。元のページが奇妙にフォーマットされているにもかかわらず、私のオーバーレイはそれを変更できません。ここで私はjQueryの選択肢であるかどうかわからないが、私は抵抗することができませんでし

<body> 
    <style> 
    .overlay { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 100%; 
     height: 100% 
     /*some magic I am unaware of*/ 
    } 
    </style> 
    <!-- begin original document (stupid hypothetical scenario) --> 
    <div style="position:absolute;top:0px;width:100%;height:100%;background-color:red;"> 
    <!-- this div is part of the original html document I want to overlay. 
    It should behave as it did originally, i.e size to the viewport of the document--> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id tellus vehicula, tincidunt est fermentum, hendrerit dui. Nullam lacinia, justo sed porta hendrerit, nisl quam blandit nunc, ut imperdiet nibh metus in ante. Pellentesque viverra egestas 
    nulla eu dictum. Aliquam ac accumsan leo. Integer ut tellus odio. Duis blandit venenatis venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vel lorem egestas, tincidunt sem vel, venenatis 
    ipsum. Donec vitae blandit nibh. Curabitur cursus nunc arcu, id tempor massa gravida ut. Integer vulputate libero in placerat vestibulum. Duis quis turpis vel lectus venenatis rhoncus. Sed congue est consequat, dapibus odio sit amet, sollicitudin arcu. 
    Praesent hendrerit massa velit, vel pretium erat viverra quis. Proin non enim facilisis, venenatis dolor ut, dapibus nulla. Morbi vestibulum mollis felis ut venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
    mus. Ut mollis velit nulla, et tristique sapien auctor eu. Phasellus tincidunt mauris elit, vel fringilla leo consectetur a. Vivamus a porta magna. Mauris hendrerit leo eget sapien aliquet dignissim. Nunc id sem est. Integer sed lacus est. Nulla sit 
    amet sapien et ex aliquam malesuada quis vel eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus turpis ligula, elementum sit amet sapien nec, malesuada fringilla nibh. Duis euismod, purus semper viverra aliquam, ligula sem 
    vehicula mi, sit amet cursus mauris augue vel enim. Donec lacinia diam quis sapien laoreet vulputate in eu est. Proin consequat, ex vitae molestie pellentesque, libero purus pellentesque arcu, id porttitor orci sem a lectus. Morbi mattis in metus quis 
    euismod. Nam arcu augue, imperdiet eu felis eu, rhoncus facilisis lectus. Nullam placerat, tortor non tincidunt tristique, purus magna cursus leo, vitae sagittis odio turpis sodales nisi. Nullam vehicula erat nisl, ac venenatis massa rutrum sed. Mauris 
    massa tortor, volutpat vel nisl a, consectetur molestie sapien. Quisque eu elit nulla. Praesent at eros vehicula, lobortis purus quis, efficitur velit. Donec eget faucibus nisl. Praesent pharetra mattis porta. Donec volutpat lacinia dui non maximus. 
    Vivamus eu sodales leo. Ut eu ipsum scelerisque, consectetur turpis condimentum, malesuada elit. Proin tincidunt mauris metus, eu tincidunt ex ultrices ut. Sed sollicitudin leo nunc, in pharetra ligula egestas ut. Etiam suscipit eget ligula ut convallis. 
    Ut tempus tellus id ultrices rutrum. Nam accumsan fermentum metus, tristique gravida eros ultricies eget. Integer tortor diam, posuere ut ornare quis, bibendum ut tellus. Maecenas imperdiet lacus vitae felis viverra, nec dignissim lacus volutpat. Curabitur 
    et elit vehicula ipsum luctus tempor et sed enim. Fusce ultrices eget ante nec consectetur. Donec commodo nunc eget diam tristique, at euismod nisl commodo. Fusce felis neque, vulputate ut tincidunt sed, commodo in risus. Quisque sed magna sodales tortor 
    condimentum aliquam. Phasellus mattis justo eget diam tincidunt luctus. Cras pharetra ultrices sem, sed sollicitudin purus feugiat sed. Vivamus vitae tempor velit. 
    <!-- end original document --> 
    <div class='overlay'> 
    <!-- this div is my overlay. It should size to the content of the document body, not the viewport. Careful setting the body's position to relative, the other div will change!--> 
    </div> 
</body>

出典

2016-05-05 Gabriel Rossmann

*「コンテンツがオーバーフローした場合、オーバーレイですべてがカバーされません：\」* - うん、解決するのは難しいと思う。一方、コンテンツ領域全体をカバーするものを作成することはそれほど難しいことではありませんが、その領域を*厳密に*カバーする必要があることを意味すると見なします。言い換えれば、カバーする必要がある以上に大きくすべきではありませんそのエリア。 – GolezTrol

そうです。で、固定されているオーバーレイを持つことは望ましくありません。問題のノードのサイズであり、スクロール/サイズ変更の動作に従うオーバーレイが必要です。 –

jQueryを使用してオーバーレイのサイズを変更して配置することはできますか？ – Lesley

私はあなたが体に1つの要素を追加するのが最善だと思います（拡張機能に利用可能な上位の積み重ねられた要素にアクセスできない場合）、単にelement.getClientBoundingRect()を使用して位置と寸法を取得してください。ここで、「トリック」の

function applyStyle(element, styles) { 
 
    for (var key in styles) { 
 
    element.style[key] = styles[key]; 
 
    } 
 
} 
 

 
var overlay = document.body.appendChild(document.createElement('div')), 
 
    indicator = overlay.appendChild(document.createElement('div')); 
 

 
// apply the styles 
 
applyStyle(overlay, { 
 
    position: 'absolute', 
 
    top: 0, 
 
    left: 0, 
 
    right: 0, 
 
    bottom: 0, 
 
    zIndex: 2147483647, // it doesn't get higher than this 
 
    pointerEvents: 'none' 
 
}); 
 

 
applyStyle(indicator, { 
 
    position: 'absolute', 
 
    border: '1px dotted red', 
 
    backgroundColor: 'rgba(255,0,0,0.2)' 
 
}); 
 
     
 

 
window.addEventListener('mouseover', function(event) { 
 
    var bound = event.target.getBoundingClientRect(); 
 

 
    applyStyle(indicator, { 
 
    top: bound.top + 'px', 
 
    left: bound.left + 'px', 
 
    width: bound.width + 'px', 
 
    height: bound.height + 'px' 
 
    }); 
 
});

.foo { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 10px; 
 
    width: 300px; 
 
    border: 1px solid gold; 
 
} 
 

 
.bar { 
 
    position: relative; 
 
    width: 40%; 
 
    margin: 200px auto 0; 
 
    max-height: 10em; 
 
    overflow: hidden; 
 
    border: 1px solid green; 
 
}

<div class=foo> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh dapibus tellus varius tristique vitae id elit. Fusce vestibulum neque a scelerisque pellentesque. Vestibulum eu odio risus. Aliquam id tellus in mauris sollicitudin vestibulum. Aenean vestibulum et massa vel dapibus. Pellentesque eu lectus odio. Aliquam vitae fermentum mauris. Pellentesque feugiat sem vel dolor imperdiet tempor. 
 
</div> 
 

 
<div class=bar> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh dapibus tellus varius tristique vitae id elit. Fusce vestibulum neque a scelerisque pellentesque. Vestibulum eu odio risus. Aliquam id tellus in mauris sollicitudin vestibulum. Aenean vestibulum et massa vel dapibus. Pellentesque eu lectus odio. Aliquam vitae fermentum mauris. Pellentesque feugiat sem vel dolor imperdiet tempor. 
 
</div>

ビットが伴う：

は<body>はそれを作る内オーバーレイ要素が最後の要素であると組み合わせ最大Z指数を使用してほぼページ上に上がることは不可能

あまり知られていない現代
が
pointer-events: none CSS、オーバーレイ要素からインタラクティビティを取り除く（単に再度有効にするインジケータにpointer-events: autoを追加）getBoundingClientRect宝

使用すると、1つの特定のブラウザと（常緑）をターゲットにしていると1つ、私はあなたがjQueryを使うべきだとは思わない。あなたはそれを必要としません。

出典

2016-05-05 19:30:27

は...あなたはあなたのオーバーレイのスタイルをjQueryのを使用することができます方法です

var $thingToOverlay = $('#someDivOrWhatever'); // use $(document) for whole page 
var $overlay = $('.overlay'); 

var getMaxZ = function($elements){ 
    var z; 
    return Math.max.apply(null, $elements.map(function(){   
     return isNaN(z = parseInt($(this).css("z-index"), 10)) ? 0 : z;  
    })); 
}; 

$overlay.css({ 
    'position': 'absolute', 
    'box-sizing': 'border-box', 
    'background-color': 'red', 
    'height': $thingToOverlay.height(), 
    'width': $thingToOverlay.width(), 
    'top': $thingToOverlay.offset().top, // don't use this for whole page (document), just set to 0 
    'left': $thingToOverlay.offset().left, // ditto 
    'z-index': getMaxZ($overlay.siblings()) // assuming overlay is last on page, no need to +1 
});

これは明らかに周りにいくつかのロジックが必要になりますオーバーレイがページ全体をカバーする必要があるかdivだけをカバーする必要があるかによって異なりますが、あなたはそのアイデアを得ますか？

出典

2016-05-05 17:04:36 Lesley

zIndexを忘れないでください。 – GolezTrol

OPには最後のdivとして '.overlay'があったので、Z-indexは必要ありません。 – Lesley

他の要素は、明示的なZ-インデックスを持つことができます。 – GolezTrol

任意のhtmlドキュメントの目立たないオーバーレイを作成する

答えて

関連する問題