Simple jQuery centered layover

HTML

<button class="show-more-socials">
show more socials
</button>

<div class="more-socials-container">
  See more our Socials...
</div>

CSS

.more-socials-container {
  display: none;
  position: absolute;
  right: 20px;
  top: 5%;
  background: red;
  padding: 30px;
  border: 1px solid blue;
  color: white;
}

JavaScript

$(document).ready(function() {
	var $triggerMoreSocials = $('.show-more-socials');
  var $moreSocialsContainer = $('.more-socials-container');
  
  $triggerMoreSocials.on('click', function(e) {
  	e.preventDefault();
    
    if($moreSocialsContainer.is(':visible') || $moreSocialsContainer.is(':animated')) {
    	return;
    }
    
    var marginRight = (((1 - $moreSocialsContainer.outerWidth(true)) + 1) / 2) + 'px', 
    		marginTop = (((1 - $moreSocialsContainer.outerHeight(true)) + 1) / 2) + 'px';
    
    $moreSocialsContainer.fadeIn().animate({
    	right: '50%',
      'margin-right': marginRight
    });
    
    // also vertical centered...
    /*
    $moreSocialsContainer.stop().fadeIn().animate({
      right: '50%',
      'margin-right': marginRight,
      top: '50%',
      'margin-top': marginTop
    });    
    */
  });  
  
  $(document).mouseup(function (e) {
    if ($moreSocialsContainer.is(':visible') && !$moreSocialsContainer.is(e.target) && $moreSocialsContainer.has(e.target).length === 0) {
        $closeMoreSocials.trigger('click');
    }
	});
});