jquery - 制作出现在表格行上的响应式弹出窗口单击

Question

我正在使用以下代码在每个表格行上制作一个弹出窗口，但我无法将弹出窗口置于屏幕中央，显然它没有响应。

编辑:JSFiddle

HTML:

<table>
   <tbody>
            <tr>
                <th>No.</th>
                <th>Categories</th>
                <th>Sub-Categories</th>
                <th>Counts</th>
                <th>description</th>
            </tr>
            <tr class="popupOpen" data-href="#entry1">
                <td>1</td>
                <td>Category 1</td>
                <td>Sub-Category 1</td>
                <td>12</td>
                <td>This is a test</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Category 2</td>
                <td>Sub-Category 2</td>
                <td>14</td>
                <td>This is a test again</td>
            </tr>
      </tbody>
</table>
<div id="entry1" class="largeWin">
        <a href="#" class="close">X</a>
      <p>some text here...</p>
</div>

JQuery:

$('tr.popupOpen').click(function() {

    var popup= $(this).attr('data-href');

    $(popup).fadeIn(300);

    //Set the center alignment padding + border
    var popMargTop = ($(popup).height() + 24) / 2; 
    var popMargLeft = ($(popup).width() + 24) / 2; 

    $(popup).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

$('a.close, #mask').live('click', function() { 
  $('#mask , .largeWin').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});

如何让弹出窗口居中并使其响应？

Answer 1

检查这个 fiddle 。

Updated Fiddle

您是否正在努力实现这样的目标。

$(document).ready(function () {
    $('tr.popupOpen').click(function () {

        var popup = $(this).attr('data-href');

        $(popup).fadeIn(300);

        //Set the center alignment padding + border


        $(popup).css({
            'margin-top': '20px',
                'margin-left': '40px'
        });

        // Add the mask to body
        $('div.container').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    });

    $('a.close, #mask').live('click', function () {
        $('#mask , .largWin').fadeOut(300, function () {
            $('#mask').remove();
        });
        return false;
    });
});