I'm currently struggling with positioning a popup in the center of the screen and making it responsive. The code I'm using involves generating a popup for each table row, but I haven't been successful in achieving the desired result.
Edit: JSFiddle
Here is the HTML snippet:
<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>
And this is the JQuery part:
$('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;
});
Any ideas on how I can improve the centering and responsiveness of my popup?