0

ネストされたグリッドビューがあり、行Aの画像にカーソルを合わせると、最初のページには何もポップアップが読み込まれませんが、行Aの画像に2回目のカーソルを合わせると正しい情報ポップアップが表示されます。

もう1つの問題は、行Aにカーソルを合わせた後に行Bの画像にカーソルを合わせると、行Aから行Bの行Aの詳細がポップアップ表示されますが、2回目に行Bにカーソルを合わせると正しい詳細がポップアップ表示されることです。

私はしばらくの間それを解決しようとしてきたので、私はこの問題のためにどんな援助も大いに感謝します。

JSFIDDLEリンクはデモンストレーションとして以下にあります

4

2 に答える 2

1

これが問題の解決策でした

  $('img.imagepopupcontext').hover(function (e) {
          // Begin mouseover function

            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent

            count++;
            //$('#ctl00_ContentPlaceHolder1_txtcontextkey').val(cvalue);
            //$('#ctl00_ContentPlaceHolder1_btnmodalclick').click();

           // var img = $(this);

            $.ajax({url:'callbackdynamicdata.aspx',context:this,data:({ ID: cvalue}),success:
               function(data){

                    var html = '<div id="infopathpanel">';
                    html += data;
                    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('#infopathpanel')
                            .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.
                    var pos = $(this).offset();

                    $('#infopathpanel').css({
                        position: "absolute",
                        top: (pos.top - 170) + "px",
                        left: (pos.left - 310) + "px",
                        'background-color': '#ffffcc',
                        'width': '300px',
                        'border-color': '#060F40',
                        'border-width': '2px',
                        'color': '#060F40'

                    });               

               }})
于 2012-05-04T20:41:43.237 に答える
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var offsetY = -20;
            var offsetX = 40;
            var html = '<div id="info" class="InfoMessage"><h4>Info here </h4><p></p></div>';
            $(html).hide().appendTo('body');

            $('img.imagepopupcontext').hover(function (e) {
                $('div.InfoMessage').hide().find('p').text($(this).data('message'));
                $('div.InfoMessage').fadeIn(400);
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            }, function () {
                $('#info').hide();
            });

            $('img.imagepopupcontext').mousemove(function (e) {
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            });
        });
    </script>
    <style type="text/css">
        #info
        {
            background: #7F7777;
            width: 300px;
            padding-bottom: .5em;
            padding-right: 15px;
            overflow: hidden;
            position: absolute;
        }
    </style>
</head>
<body>
    <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 a
                        </td>
                        <td>
                            inner table2 A
                        </td>
                        <td>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information A a" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            inner table b
                        </td>
                        <td>
                            inner table2 B
                        </td>
                        <td>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information B b" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
        </p>
    </div>
</body>
</html>
于 2012-05-04T09:57:11.040 に答える