Jquery 制作一个显示在表格行上的响应弹出窗口，单击

我正在使用下面的代码在每个表行上创建一个弹出窗口，但是我不能将弹出窗口放在屏幕中央，显然它没有响应

编辑：

HTML:

不
类别
子类别
计数
描述
1.
第一类
第1小类
12
这是一个测试
2.
第2类
次级类别2
14
这又是一次考验
这里有一些文字

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

$（'tr.popupOpen'）。单击（函数（）{
var popup=$（this.attr（'data-href'）；
$（弹出窗口）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（弹出）.height（）+24）/2；
var popMargLeft=（$（弹出）.width（）+24）/2；
$（弹出窗口）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
返回false；
});
$（'a.close，#mask'）.live（'click'，function（）{
$（'#mask，.largeWin'）.fadeOut（300，function（）{
$（“#掩码”）.remove（）；
}); 
返回false；
});

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

检查此小提琴

你是在努力实现这样的目标吗

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

$（文档）.ready（函数（）{
$（'tr.popupOpen'）。单击（函数（）{
var popup=$（this.attr（'data-href'）；
$（弹出窗口）.fadeIn（300）；
//设置中心对齐填充+边框
$（弹出窗口）.css({
“页边距顶部”：“20px”，
“左边距”：“40px”
});
//将遮罩添加到主体
$（'div.container'）。追加（“”）；
$（'面具'）.fadeIn（300）；
返回false；
});
$（'a.close，#mask'）.live（'click'，function（）{
$（'#掩码，.largWin'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
});
返回false；
});
});

发布您的HTML，如果您随意使用code@Richa当前位置我更新了我的问题。请看一下我的代码。是的，是这样的！我说面具在JSFIDLE中不起作用。（你做了什么？）无论如何，问题是它没有居中。指定页边距不会使其显示在中间。因此，您可以根据需要调整页边距，使其居中。如果它有帮助，你可以随时投票或接受它作为答案：）我发现了我的错误，编辑了我的问题。请检查此项：--我使用“var popmagtop=（$（popup.height（）+24）/2；var popMargLeft=（$（popup.width（）+24）/2；”来居中弹出窗口，但它不起作用。你的例子也没有居中！尝试在JSFIDLE中扩展html部分，您将看到。您不能根据需要简单地调整px吗？不，这不是一个好方法，并且不能在所有显示分辨率上工作。

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