Question

我自己开始编写一个非常简单的jQuery Popup。

这是代码

<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

您正在寻找的解决方案非常简单 - 当您找到它时。。。

在文档就绪函数中添加一个在浏览器调整大小事件期间触发的函数;在该功能中重新对话：

$(document).ready(function () {

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

});

顺便说一句，当您打开对话框时，无需指定顶部或左侧，因为默认位置是中心。

Answer 3

首先不推荐使用bind，使用jQuery 1.7中的.on()，然后当弹出框淡出时，事件处理失败，因此限制调整大小一个函数的事件处理程序导致脚本中断。

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

Answer 4

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

我建议您将重新定心代码与开头代码分开，以便根据具体情况更具体地调用它们。

jQuery Popup中的窗口调整大小问题

4 个答案: