title: closing iframe on esc key or clicking anywhere else
body: <p>i want to close the iframe box as soon as i hit <code>esc</code> or i click outside the iframe area at the moment i have to click back on <code>hideshow</code> icon to hide the iframe again is there a method that i can use to close the iframe with <code>esc</code> or clicking outside the iframe area</p>
  
  <p><strong>index.php</strong> </p>
  
  <pre><code>&lt;div id="msg_pic"&gt;
          &lt;a class="msg_pic_link" id="hideshow"&gt;&lt;span&gt;&lt;img src="emptymsg.png" width="21px" height="21px"/&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
  
  &lt;div id="message" &gt;
                  &lt;iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"&gt;&lt;/iframe&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>hide-show.js</strong></p>
  
  <pre><code>$('#hideshow').on("click", function() {
      var text = $(this).val();
      $("#message").toggle();
  
  });
  </code></pre>
  
  <p><strong>mycss.css</strong></p>
  
  <pre><code>#message
  {
  display:none;
  position: absolute; 
  z-index: 1; 
  }
  </code></pre>
  
  <p>the question how can i press esc key or click outside the <code>msg_pic_link</code> div to close <code>message</code></p>