0

動的にサイズを変更し、水平方向の中央に配置しようとしているポップアップがあります。max-widthポップアップはモバイル環境とデスクトップ環境の両方で動作する必要があるため、ウィンドウの幅がポップアップの幅よりも小さい場合にサイズ変更を処理して余白を削除するために、簡単な jQuery を作成しました。これはすべて正常に機能しますが、ウィンドウのサイズをゆっくりと変更するたびに、ポップアップがデフォルトで中央に留まるのではなく、左端に収まるようになります。ここに私のコードがあります.CSSはまだ私の頭を少し超えているので、助けていただければ幸いです.

jQuery:

$(window).resize(function(){
    var w = $('.body').width();
    if (w > 1000) {
        $('.popup_modal').css({"left": (w - 1000) / 2 + "px"});
    } else if (w < 1000) {
        $('.popup_modal').css({"left": "0px"});
    }
});

CSS:

.popup_modal {
    display: none;
    width: 100%; 
    max-width: 1000px;
    float: left; 
    background: #fff; 
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    box-shadow: 0px 0px 5px #ccc;
    position: relative; 
    margin-top: 20px; 
    padding: 20px;
}

ありがとう！

4

1 に答える 1

0

次のコードに変更します。

$(window).resize(function(){
    var w = $(window).width;
    if (w > 1000){
        $('.popup_modal').css({"left" : (w-1000)/2 + "px"});
    } else if (w < 1000){
        $('.popup_modal').css({"left" : "0px"});
    }
});
于 2014-01-23T16:32:21.080 に答える