cómo obtener una ventana emergente de jquery cuando se desplaza sobre la imagen en una vista de cuadrícula anidada

La ventana emergente obtiene la información de una base de datos y la agrega dinámicamente a un panel donde se mostrará una vez que pase el mouse sobre la imagen dentro de la vista de cuadrícula anidada. la posición de la ventana emergente también debe estar a la izquierda de la imagen. cuando pasas el cursor sobre la imagen, desaparece rápidamente dentro de mí haciendo un mouse-out. se necesita ayuda si alguien puede ayudar, ya que he estado tratando de lograr esto usando jquery, en el que también soy un novato.

 $('img.imagepopupcontext').mouseover(function () {
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent
            count++;
            $('#ctl00_ContentPlaceHolder1_txtkey').val(cvalue);
            $('#ctl00_ContentPlaceHolder1_btnpopupclick').click();

            var pos = $(this).offset();

            $('#ctl00_ContentPlaceHolder1_panelshow').css({
                position: "absolute",
                top: (pos.top - 100) + "px",
                left: (pos.left - 310) + "px"
            });
            $('#ctl00_ContentPlaceHolder1_panelshow').css('display', 'block');
            //alert('image test over' + pos.left + "," + pos.top);

        });

        $('img.imagepopupcontext').mouseout(function () {
            //alert(count);
            count = 0;
            //$('#ctl00_ContentPlaceHolder1_btnpopupclick').html('');
            $('#ctl00_ContentPlaceHolder1_panelshow').hide();
            //alert('image test mouse out');

        });

Haga clic aquí para ver el JSFIDDLE

preguntado el 03 de mayo de 12 a las 18:05

1 Respuestas

Creo que el siguiente código lo iniciará en su viaje. También actualicé tu JSFiddle. Sin embargo, no sé si se guardará en su cuenta allí.

La función de desplazamiento en jQuery incorpora tanto 'mouseover' como 'mouseout' por lo que es un poco más fácil de usar.

CO

    #info
    {
        background: #CCC;
        width: 300px;
        padding-bottom: .5em;
        padding-right: 15px;
        overflow: hidden;
        position: absolute;
    }

HTML

    <table border="1" bgcolor="skyblue">
        <tr>
            <td>
                in progress
            </td>
            <td>
                Sale
            </td>
        </tr>
        <tr>
            <td>
                in progress
            </td>
            <td>
                <table border="1" bgcolor="orange">
                    <tr>
                        <td>
                            inner table
                        </td>
                        <td>
                            inner table2
                        </td>
                        <td>
                            <img id="imgpopup" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
            Show information from database
        </p>

jQuery

    $(function () {

        // Set the offsets for the mouse over upfront 
        // so they are easier to change.
        var offsetY = -20; 
        var offsetX = 40;

        $('#imgpopup').hover(function (e) {
            // Begin mouseover function

            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var $dbInfo = $('#dbInfo');

            // Create a variable that will hold the HTML
            // for the pop up. However, this is not the best
            // way dynamically create the popup. You should
            // look into jQuery templating.
            var html = '<div id="info">';
            html += '<h4>Info here</h4>';
            html += '<p>' + $dbInfo.text() + '</p>';
            html += '</div>';

            // Append the variable to the body and the select
            // itself and its children and hide them, so you
            // can then add a fadeIn effect.
            $('body')
                .append(html)
                    .children('#info')
                    .hide()
                    .fadeIn(400);

            // This is where the popup offesets away from your cursor
            // The variables set up top will decide how far away the
            // pop up strays away from your cursor.
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);

        }, function () {
            // Begin mouseout function

            // Remove on mouse out
            $('#info').remove();
        });

        // Whenever the mouse moves the popup will follow using
        // the offsets set up top.
        $('#imgpopup').mousemove(function (e) {
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);
        });

    });

contestado el 03 de mayo de 12 a las 21:05

David, tienes que actualizar y reenviar/compartir el enlace JSFIDDLE. - Nación

Esta solución me hizo comenzar con lo que quería hacer, muchas gracias. wayne9999

El siguiente enlace tiene un excelente tutorial sobre el uso de plantillas. http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-jquery-templating-and-ajax/ - david este

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.