1

私はこのjQuery関数を持っています:

    $(window).resize(function(){
  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: ($(window).height() - $('#modal').outerHeight())/2
  });
});

これは、「ウィンドウのサイズ変更時にdivを画面の中央に配置する」という必要なことを行います。唯一の問題は、ウィンドウを十分に縮小する (400 ～ 500 ピクセル) か、低解像度のデバイス (携帯電話) から Web ページにアクセスすると、見出しが境界線から外れて見えなくなることです。

なぜこれが起こり、どうすればそれを回避できますか?

4

3 に答える 3

1

この機能が役立つ場合があります。

function setToCenterOfParent( obj, parentObj ) {
    var height = $( obj ).height();
    var width = $( obj ).width();
    if ( parentObj == window ) {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) );
    }
    else {
        $( obj ).css( 'top', ( $( parentObj ).height() / 2 ) - ( height / 2 ) + $( parentObj ).position().top );
        $( obj ).css( 'left', ( $( parentObj ).width() / 2 ) - ( width / 2 ) + $( parentObj ).position().left );
    }
}
于 2012-11-29T09:43:22.363 に答える
1

小さなテストを追加するだけです：

$(window).resize(function(){
  var topPos = ($(window).height() - $('#modal').outerHeight())/2;

  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: topPos > 0 ? topPos : 0
  });
});
于 2012-11-29T09:41:51.107 に答える
0

モーダルよりも小さいウィンドウでは、負の値になります。その場合にどうなるかを考えることが重要です。私は通常、ウィンドウの配置をやめて、モーダルがウィンドウ全体を覆うようにします: CSS メディア クエリを使用して、定義済みの px 値からモーダル サイズを変更し、画面サイズの相対値に一致させます。

   #modal {
      width: 500px;
   }

    @media only screen and (max-width: 500px) {
      #modal { 
          width: 100%;
      }
    }
于 2012-11-29T09:44:18.373 に答える