Question

I started writing a very Simple jQuery Popup myself.

Here is the code

<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>

Everything is working fine. But the problem is here in this code

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

This code is to keep the popup in the center of the browser. But, even after i close the popup, if i resize the browser this code again opens up the popup.

I need to use a if condition somewhere in the code!. Where to use and how to use?.
Give me a solution please!.

Answer 1

Remove the .fadeIn() from the function and place it in the click handler.

$("#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);