0

私は非常にシンプルな 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 条件を使用する必要があります。どこで、どのように使用するのですか？解決策を教えてください！

4

4 に答える 4

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);
于 2012-04-29T15:39:25.513 に答える
1

あなたが探している解決策は、非常に単純です。. .

ドキュメントの準備完了関数内に、ブラウザーのサイズ変更イベント中に起動する関数を追加します。その関数内で、ダイアログを再中央揃えします。

$(document).ready(function () {

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

});

ところで、ダイアログを開くときに、デフォルトの位置が中央であるため、上または左を指定する必要はありません。

于 2012-06-24T04:36:34.817 に答える
0 
if( $("#overlay_form").is(':visible') ) {
    // it's showing, so recenter it
}
else {
    // it's hidden, so you don't care
}

状況に応じてより具体的に呼び出すことができるように、リセンタリングコードをオープニングコードから分離することをお勧めします。

于 2012-04-29T15:36:45.307 に答える
0

まず、jQuery 1.7 からbind使用することをお勧めしません。次に、ポップアップ ボックスがフェードアウトするとイベント処理が失敗するため、サイズ変更とイベント ハンドラーを 1 つの関数に制限すると、スクリプトが壊れます。.on()

$(window).on('resize',function() {
   openPopup();
});
于 2012-04-29T15:33:01.650 に答える