1

Web サイトにオーバーレイ効果 (モーダル) タイプの効果を作成しようと考えています。固定幅と高さの効果を既に使用していますが、使用可能な画面スペースの 85% を埋めたいですか?

どうすればこれを達成できますか？

私の古いコードは次のようになります。

$('#overlay').fadeIn('fast');
            $('#lightbox').css({
                    position:'fixed',
                    left: ($(window).width() - $('#lightbox').outerWidth())/2,
                    top: ($(window).height() - $('#lightbox').outerHeight())/2
            });
4

1 に答える 1

3

オーバーレイで画面スペースの 85% を埋めたいですか? 次に、必要な幅/高さと x/y 座標を計算する必要があります。

var targetProcent = 85;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);   
var targetX = ($(window).width() - targetWidth) / 2;
var targetY = ($(window).height() - targetHeight) / 2;

$('#overlay').width(targetWidth);
$('#overlay').height(targetHeight);
$('#overlay').css({
    "position": "absolute", 
    "top": targetY+"px", 
    "left": targetX+"px"
});

変数の割り当ての多くはおそらく切り取ることができますが、わかりやすくするために残しました。

于 2011-06-10T09:54:49.703 に答える