javascript - Hide iFrame when you click anywhere outside its boundaries -

im looking iframe close when click away it.

i have tried jquery unsuccessful:

$('body').click(function(event){  if($(event.target).parents('#mainframe_example').length <= 0)      $('#mainframe_example').hide(); }) 

heres code:

<div class="modal-content">       <div class="modal-header">         <h4 class="modal-title generic-modal-title">select</h4>       </div>       <div class="modal-body generic-modal-body">         <div style="max-height:400px; overflow:scroll;">             <iframe src="blahblahblah.aspx" id="mainframe_example" width="100%" height="400px" scrolling="no" frameborder="0"></iframe>         </div>        </div> </div> 

does have ideas?

try this:

$(document).add(parent.document).click(function(e) {     var iframe = $('iframe');     if (!iframe.is(e.target) && iframe.has(e.target).length === 0) {         iframe.hide();     } });