Home/ Questions/Q 9209461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:50:54+00:00

I have a little test I’m doing with clicking on a image that reveals

  • 0

I have a little test I’m doing with clicking on a image that reveals an iframe. Then I want to click anywhere but that image (the #container div). I can get the iframe to popup but I can’t get it to hide when I click in the main div (#container). 

   <html>
   <head>
   <script type="text/javascript"    src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
   <script>
$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').click(function(e) {
    $('div#pop-up').show();
      //.css('top', e.pageY + moveDown)
      //.css('left', e.pageX + moveLeft)
      //.appendTo('body');
  }, function() {
    $('#container').click(function(){
    $('div#pop-up').hide();
    });

  $('a#trigger').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

   });</script>
       <style>
    h1{
    margin: 0;
    padding: 0;
    font-weight: normal;
    }
    div#container {
    width: 580px;
    margin: 15px auto 0 auto;
    padding: 20px;
    background: #000;
    border: 1px solid #1a1a1a;
    }
   /* HOVER STYLES */
   div#pop-up {
   display: none;
   position: absolute;
   /*width: 150px;
   padding: 150px;*/
   background: #eeeeee;
   color: #000000;
   border: 1px solid #1a1a1a;
   font-size: 90%;
  }
    </style>

   </head>
   <body>
<div id="container">
    <h1>Pop-out Example - pop out div on hover</h1>
    <p>
        <a href = "#" id="trigger"><img src="router.png"/></a>
    </p>
</div>
<div id="pop-up">
    <p>
        <iframe width="500px" height="350px" align= "top-left" src="http://127.0.0.1:667"></iframe>
    </p>
</div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seeing as you are using jQuery you can do the following. The javascript instructs that if the document is clicked anywhere the target div is hidden. However if the click was within the boundaries of the element target the hide() is stopped by stopPropagation()

    Javascript

    $(document).click(function() {
    $('#target').hide();
});
$("#target").click(function(e) {
    e.stopPropagation();
});

    HTML

    <div id="target">Test</div>

    CSS

    #target {
  width: 50px;
  height: 50px;
  background-color: red;
}

    Illustrated in this fiddle

    • 0