Question

I have frames and I want to close or hide them by clicking outside the “popup frames”. The following code shows the element.

<span class="frame" id="mapframe">
   <iframe src="link" frameborder="0" width="520" height="470">
   </iframe>
</span>

This code above is how I’m trying to close the frame:

$(document).bind('click', function(e){ 
      var $clicked = $(e.target); 
      if (!($clicked.is('#mapframe') || $clicked.parents().is('#mapframe'))) { 
         $("#mapframe").hide();
      }
});

It works when just one frame is opened, but if there are more than two frames, it doesn’t close all of them. It was supposed to close the last frame when there is a click outside it. It looks like there is a stack of frames and I want to pop the stack whithin every click outside 🙂

Thanks in advance!

Answer 1

To close all frames try selecting by class instead of id. Id is for one selector, class will close them all.

$('.frame').hide();