jQueryポップアップでのウィンドウのサイズ変更の問題

Question

非常に単純なjQueryポップアップを自分で作成し始めました。

はここ

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#pop").click(function(){ 
     openPopup(); 
    }); 
    $("#close").click(function(){ 
     closePopup(); 
    }); 
    }); 

function openPopup(){ 
$("#overlay_form").css({ 
    left: ($(window).width() - $('#overlay_form').width())/2, 
    top: ($(window).width() - $('#overlay_form').width())/7, 
    position:'absolute' 
}); 

$("#overlay_form").fadeIn(1000); 

    } 
function closePopup(){ 
$("#overlay_form").fadeOut(500); 
} 

$(window).bind('resize',openPopup); 

</script> 

すべてが正常に動作しているコードです。しかし、このコードに問題があります

$(window).bind('resize',openPopup); 

このコードは、ブラウザの中央にポップアップを維持するためのものです。しかし、ポップアップを閉じた後でも、ブラウザのサイズを変更すると、このコードは再びポップアップを開きます。

コードのどこかにif条件を使用する必要があります。使用する場所と使用方法は？ 私に解決策を教えてください！。

Answer 1

.fadeIn()を関数から削除し、クリックハンドラに配置します。

$("#pop").click(function(){ 
    $("#overlay_form").fadeIn(1000); 
    resizePop(); 
}); 


function resizePop(){ 
    if(!$("#overlay_form").is(':visible')){ 
    return; 
    } 
    $("#overlay_form").css({ 
     left: ($(window).width() - $('#overlay_form').width())/2, 
     top: ($(window).width() - $('#overlay_form').width())/7, 
     position:'absolute' 
    }); 
} 

$(window).bind('resize',resizePop); 

Answer 2

すべてbindの第一のjQuery 1.7と次から.on()を使用し、推奨されませんポップアップボックス、を扱うあなたのイベントがを失敗したがそうリサイズを制限し、その後1つの関数にイベントハンドラがスクリプトが破損する原因となる、フェードアウトされます。

$(window).on('resize',function() { 
    openPopup(); 
}); 

Answer 3

if($("#overlay_form").is(':visible')) { 
    // it's showing, so recenter it 
} 
else { 
    // it's hidden, so you don't care 
} 

私はあなたの状況に基づいて、より具体的にそれらを呼び出すことができるようにあなたが開くコードから再中心にコードを分離することをお勧めします。

Answer 4

あなたが探している解決策は、あなたがそれを見つけたときに非常に簡単です。 。 。

ドキュメントレディ機能では、ブラウザのサイズ変更イベント中に発生する機能を追加します。その関数の再センター内でごダイアログ：あなたは、ダイアログを開いているときところで

$(document).ready(function() { 

    $(window).resize(function() { 
     $('#overlay_form').dialog('option', 'position', 'center'); 
    }); 

}); 

は、デフォルトの位置が中央であるとして、上部または左に指定する必要はありません。