Making a responsive popup that appears on table row click

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/24968756/making-a-responsive-popup-that-appears-on-table-row-click

标签

jquery

html

css

popup