cascading classes and on-click functionality issues

cascading classes and on-click functionality issues

Hi there,

I have an issue with using jQuery for a pop-up window.

I have a class called "clicker".

If you click it the "showHideBox()" function is being called:
$(".clicker").click(function(){
   showHideBox();
  });

showHideBox function is showing box -  $(".box").fadeIn(700) or hiding it when clicked again -  $(".box").css("display","none").

.box div is positioned fixed with high z-index to provide sort of light-box effect.

The .box div contains some clickable - interactive bits.  

The .box div is quite big and it's partially overlapping the .clicker div.

the problem is that when you click  an area of the .box div which is overlaping the .clicker div the jQuery is acting as if I was clicking  the .clicker.

So it's actually taking listening to the .clicker functionality - even if i give the .box css("display","block") function.

Please advice if anyone knows a solution for this. 

Many thanks in advance.