0

私はjQueryポップアップウィンドウを使用していますが、ブラウザウィンドウの幅を変更したときにボックスを中央に配置する方法を疑問に思っていました.現在、ページの読み込み時に中心点を取得し、幅を変更するとその位置に留まります.

ポップアップ関数に使用するコードは次のとおりです。

 //Popup dialog
 function popup(message) {

// get the screen height and width  
var maskHeight = $(document).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment     
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 

// Set overlay to fill screen
$("#dialog-overlay").css("width","100%").fadeIn();

// Set dialogue box 80px from top and central
$('#dialog-box').css({top:80, left:dialogLeft}).fadeIn();

// display the message
//$('#dialog-message').html(message);

// Close button fades out overlay and message   
$('.button').live('click',function()
{
    $(this).parent().fadeOut();
    $('#dialog-overlay').fadeOut();
    return false;
});

 }
4

2 に答える 2

2

JavaScript ソリューションはwindow.onresize、ウィンドウのサイズに何かが起こるたびにトリガーされるものを使用することです。

window.onresize = function() {
    var maskWidth = $(window).width();
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
    $('#dialog-box').css({top:80, left:dialogLeft});
}

内部コードを関数に入れて、複製を節約するのがおそらく最善です。

于 2012-05-15T09:08:45.940 に答える
0

IE6 をサポートする必要がない限り、position:fixed を使用し、ほとんどの作業を JS ではなく CSS で行うことを検討するのが理にかなっています。

例えば

#dialog-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#dialog-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 500px;
    margin: -250px 0 0 -200px; /* width and height divided by 2 */
}

ただし、これは固定の幅/高さのダイアログ ボックスがあることを前提としています。

于 2012-05-15T09:09:30.847 に答える