jQuery tooltip problema de posicionamiento en IE

Question

Tengo un problema con IE (qué sorpresa). Estoy haciendo una función de informe de problemas (informe de mala imagen ...) en mi página. Quiero mostrar el formulario simple "informar esta imagen" con algunas preguntas (razones para informar ...). Debería aparecer después de hacer clic en la imagen del informe. Funciona perfectamente en FF y Chrome, pero hay un problema en IE. Div debería mostrarse en la posición de clic del mouse. La primera vez se muestra en el lugar correcto, pero cuando la cierro y hago clic en otra imagen de informe sin volver a cargar la página (hay más imágenes de informe en el sitio) se muestra nuevamente en el mismo lugar donde aparece la primera vez (solo en IE) Aquí está mi código:

$(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); 
    }); 
}); 

Y aquí es el código de la 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

SOLUCIONADO

que uso ahora ID (en lugar de clase) para identificar div POPUP . Consulte el reporter.php comentarios del código para obtener más información