创建一个响应弹出窗口出现在表行点击 [英] Making a responsive popup that appears on table row click

问题描述

我使用以下代码在每个表格行上弹出一个弹出窗口，但我无法将弹出窗口居中在屏幕上，显然它不响应。

修改： JSFiddle

HTML：

 < table> 
< tbody> 
< tr> 
< th>号< / th> 
< th>类别< / th> 
< th>子类别< / th> 
< th>计数< / th> 
< th> description< / th> 
< / tr> 
< tr class =popupOpendata-href =＃entry1> 
< td> 1< / td> 
< td>类别1< / td> 
< td>子类别1< / td> 
< td> 12< / td> 
< td>这是一个测试< / td> 
< / tr> 
< tr> 
< td> 2< / td> 
< td>类别2< / td> 
< td>子类别2< / td> 
< td> 14< / td> 
< td>这是再次测试< / td> 
< / tr> 
< / tbody> 
< / table> 
< div id =entry1class =largeWin> 
< a href =＃class =close> X< / a> 
< p>一些文字在这里...< / p> 
< / div> 
  

JQuery：

  $（'tr.popupOpen'）。click（function（）{
 
 var popup = $（this）.attr（'data-href'）; 
 b $ b $（popup）.fadeIn（300）; 
 
 //设置中心对齐padding + border 
 var popMargTop =（$（popup）.height 2; 
 var popMargLeft =（$（popup）.width（）+ 24）/ 2; 
 
 $（弹出）.css（{
'margin-top' -popMargTop，
'margin-left'：-popMargLeft 
}）; 
 
 //将掩码添加到body 
 $（'body'）。append '< div id =mask>< / div>'）; 
 $（'＃mask'）。fadeIn（300）; 
 
 return false; 
}）; 
 
 $（'a.close，#mask'）。live（'click'，function（）{
 $（'＃mask，.largeWin'）。fadeOut （）{
 $（'＃mask'）。remove（）; 
}）; 
 return false; 
}）; 
 

如何集中我的弹出窗口并使其具有响应性？

更新小提琴

您尝试实现此类操作。

  $（document）.ready（function（）{
 $（'tr.popupOpen'）。 b 
 $ b var popup = $（this）.attr（'data-href'）; 
 
 $（popup）.fadeIn（300）; 
 
 //设置中心对齐padding + border 
 
 
 $（弹出）.css（{
'margin-top'：'20px'，
' append（'< div id =;'left'：'40px'
}）; 
 
 //将掩码添加到body 
 $（'div.container' mask）>< / div>'）; 
 $（'＃mask'）。fadeIn（300）; 
 
 return false; 
}）; 
 
 $（'a.close，#mask'）。live（'click'，function（）{
 $（'＃mask，.largWin'）。fadeOut（300，function 
 $（'＃mask'）。remove（）; 
}）; 
 return false; 
}）; 
}）; 
  

I'm using the following code to make a popup on each table row, but I can't center the popup on the screen and obviously it's not responsive.

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

How can I center my popup and make it responsive?

解决方案

Check this fiddle.

Updated Fiddle

Are you trying to achieve something like this.

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

这篇关于创建一个响应弹出窗口出现在表行点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！