Question

I have a problem with IE (what a surprise). I am making an issue reporting function (report bad image…) on my page. I want to show the ‘report this image’ simple form with a few questions (reason to report…). It should show up after clicking the report image. It works perfectly in FF and also Chrome, but there is a problem in IE. Div should show on mouse click position. First time it shows in the right place, but when I close it and click on another report image without reloading the page (there are more report images on the site) it shows again in the same place where it shows first time (just in IE).
Here is my code:

$(document).ready(function(){
  $(".proofreporter").click(function(e){
    $('.popup').remove();  //used to remove previously shown elements

    $.ajaxSetup ({
    // Disable caching of AJAX responses
      cache: false
    });


    // setTimeout(function(){$('.popup').remove()},2000);

    var name = $(this).attr('id');
    function showData(data) {
        $("body").append(data);
    }
    //x = e.pageX;   first I tried this to get position but same result
    //y = e.pageY;

    var pos = $(this).offset(); 
    x=pos.left;
    y=pos.top;

    alert(x + 'x' + y);
    $.get('includes/reporter.php?reportimgdiv=' + name + '&x=' + x + '&y=' + y, showData);
  });
});

And here is the code of the reporter.php

if(isset($_GET['reportimgdiv']))


{       //report IMAGE
  ?>
  <style type="text/css">                                                                                                                            
  .popup {          //SOLVED; change to this: #<?echo report$_GET['reportimgdiv']?>
    position: absolute;
    left: <?echo $_GET['x'];?>;
    top: <?echo $_GET['y'];?>;
    z-index: 100;
    width: 280px; 
  }
  .subtle {
    margin: 0px;
    padding: 5px;
    border: 2px solid gray;
    font-size: small;
    text-align: left;
    background-color: #EEE;
    color: #444;
  }
  </style>
  <?
  $imgid=$_GET['reportimgdiv'];
  ?>
  <div id="reportForm001" class="popup" style="margin-top: 0em; ">   //solved: change id="report<?echo $imgid?>"
  <!--
  <form name="form1" method="post" target="reportframe" action="update/pagereportframe.php" class="subtle" style="position: relative; left: 1em; top: 2px;">
  -->
  <form name="form1" method="post" target="reportframe" action="includes/reporter.php" class="subtle" style="position: relative; left: 1em; top: 2px; background-color: white" >    
    <input name="id" type="hidden" value="<?echo $imgid; ?>">
    <div style="position: absolute; right: 1em; font-size: x-small"><a href="#" onClick="jQuery('.popup').remove();">CLOSE [X]</a></div>
    <h3>What is wrong with this image? <?echo $_GET['x'];?> X <?echo $_GET['y'];?> </h3> 
    <input type="radio" name="reason" value="1"> BLAH BLAH/b>. <br>  
    <input type="radio" name="reason" value="2"> BLAH BLAH/b>. <br>  
    <br>Comment (optional):<br>
    <textarea name="comment" rows="3" style="width: 100%"></textarea><br>
    <input value="Submit" type="submit">
  </form>
  </div>
 <?
  }

Answer 1

SOLVED

I use now ID (instead of class) to identify POPUP div. See the reporter.php code comments for more info