私は一般的な議論のために提出します。 誰もコメントしていなくても、私が見つけたなら、私は推測と決定を投稿します。
挑戦する
リンクは、コンテンツを含むウィンドウを開きます。 コンテンツの正確な寸法は事前にはわかりませんが、「合理的な」制限を超えないことが事前に想定されています。 この制限を、たとえば1000〜800とします。
ウィンドウを開いた後、コンテンツに応じたサイズを取り、あらかじめ決められた小さなインデントを残す必要があります。
予備ソリューション
最初に提案された
1.何らかの抽象的なサイズでウィンドウを開きます。 たとえば、600〜500。
2.コンテンツのサイズに応じてウィンドウのサイズを変更します。
3. Habrのページで以前に見つかった方法を使用してコンテンツを中央に配置します。
次のようになりました
HTML：
<div id="rootDiv">
<div id="popupContainer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta. Vestibulum augue metus, lacinia non, sollicitudin nec, tempus vitae, lacus. Phasellus ligula magna, vulputate non, tempus sit amet, ullamcorper id, est. Nam tellus quam, ultrices sit amet, feugiat a, egestas non, mi. Curabitur malesuada tristique nulla. Nullam libero turpis, scelerisque id, ultrices auctor, imperdiet vel, pede.
</div>
</div>
CSS
div#popupContainer
{
background-color: white;
position: absolute;
left: 50%;
padding: 10px;
}
div#rootDiv
{
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block;
position: absolute;
}
Javascript
$(document).ready(function(){
window.resizeTo(
$("#popupContainer").width() + 120,
$("#popupContainer").height() + 160
);
$("#popupContainer").css("margin-left", "-" + ($("#popupContainer").outerWidth() / 2) + "px");
$("#popupContainer").css("margin-top", "-" + ($("#popupContainer").outerHeight() / 2) + "px");
});
問題番号1
そして実際、ここから問題が始まります。 部分的には、実装方法がやや曲がっていることによるものです。そのため、resizeToを使用すると、ウィンドウサイズが変わり、受信したコンテンツ領域のサイズはツールバー、ウィンドウタイトルなどの有無に依存します。 おそらくブラウザによって異なります。 したがって、高さは「余裕を持って」取られましたが、正確に計算することはできません。
あなたはこれらのインデントのサイズを愚かに分析することができると考えられています
- resizeToをいくつかの定数値に生成します
- それぞれdocument.body.clientWidth 、 clientHeightまたはinnerWidth 、 innerHeightを介してコンテンツ領域の寸法を測定します
- 差を計算し、この差を考慮してサイズを変更します
しかし、この方法は2倍のサイズ変更のため間違っているようです。ユーザーの目の前のウィンドウがジャンプしてクロール/クロールすると、見栄えがよくありません。
問題番号2
それはオペラで発見されました-他のブラウザではそれほど顕著ではないようです
「popupContainer」がウィンドウの中央の位置に忍び寄るまでには時間がかかりますが、これも不快な効果を生み出します。
注意、質問
これらの2つの問題を最小限のコストで解決する方法と、可能であれば2番目の問題を純粋にCSSで解決する方法
コメントと説明
アップデート1
ウィンドウを開くと、特定の寸法が指定されます。 デフォルトでは、ディーバはこのウィンドウの幅いっぱいまで伸びます。 しかし、コンテンツはより広くなる可能性があります。これは、あらゆる要素が内部に現れる可能性があるためです-そしてディーバや写真、表。
したがって、少なくとも、ウィンドウの高さを揃える必要があります。 コンテンツが幅に収まらない場合は、ウィンドウの幅を調整する必要があります。
更新2
原則として、すべてのブラウザで実際のウィンドウサイズを決定できる場合、問題（結局のところ）は解決できます。 この場合、アライメントに焦点を当てた複雑なCSSおよびJavascriptの構成は必要ありません。
アップデート3
いつものように、解決策は近くのどこかにありました。resizeToの代わりにresizeByを使用すれば十分であり、実際のウィンドウサイズはもう必要ありません。 次に、各エッジから10ピクセルのインデントが必要な場合、判明します
HTML：
<div id="popupContainer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta. Vestibulum augue metus, lacinia non, sollicitudin nec, tempus vitae, lacus. Phasellus ligula magna, vulputate non, tempus sit amet, ullamcorper id, est. Nam tellus quam, ultrices sit amet, feugiat a, egestas non, mi. Curabitur malesuada tristique nulla. Nullam libero turpis, scelerisque id, ultrices auctor, imperdiet vel, pede.
</div>
CSS
div#popupContainer
{
background-color: white;
position: absolute;
left: 10px;
top: 10px;
}
Javascript
function docWidth() {
return (typeof(window.innerWidth) != 'undefined') ? window.innerWidth : document.body.clientWidth;
}
function docHeight() {
return (typeof(window.innerHeight) != 'undefined') ? window.innerHeight: document.body.clientHeight;
}
$(document).ready(function(){
window.resizeBy(
20 - (docWidth() - $("#popupContainer").outerWidth()),
20 - (docHeight() - $("#popupContainer").outerHeight())
);
});
さて、問題番号2は、ウィンドウのサイズを変更することにより、あたかもそれ自体で-自然な方法で整列が発生するように-解決されました。
SelenITとも呼ばれるヒントを提供してくれたIlya Streltsynに感謝