0

我开始自己编写一个非常简单的 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 条件！在哪里使用以及如何使用？请给我一个解决方案！

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

首先bind不推荐使用，.on()从 jQuery 1.7 开始使用，接下来，当弹出框淡出时，您的事件处理失败，因此将 resize then 事件处理程序限制为一个函数会导致脚本中断。

$(window).on('resize',function() {
   openPopup();
});
于 2012-04-29T15:33:01.650 回答
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 回答