opinion sobre este pop-up creado con jquery y css

[Alexis88]

No está mal, aunque no estás centrando bien el <div> del medio. Asígnale las siguientes propiedades:

Código CSS:

.modal{
    width: 600px;
    height: 400px;
    border:1px dotted gray;
    border-radius: 10px;
    padding: 50px;
    box-sizing: border-box;
    background: white;
    color: black;
    position: absolute;
    visibility: hidden;
    /* ACÁ VIENE EL CAMBIO */
    margin: -200px 0 0 -300px;
    top: 50%;
    left: 50%;
}
 

Y a la clase .mostrar-modal, solo le dejas las propiedad visibility. Por otro lado, esto:

Código Javascript:

$('#cerrar').on('click',function(){
    $('.content').removeClass('mostrar');
    $('.modal').removeClass('mostrar-modal');
});
 
$('.content').on('click',function(){
    $(this).removeClass('mostrar');
    $('.modal').removeClass('mostrar-modal');
});
 

Puede ir así:

Código Javascript:

$('#cerrar, .content').on('click',function(){
    $('.content').removeClass('mostrar');
    $('.modal').removeClass('mostrar-modal');
});
 

Ya que tanto el dar un clic al botón 'Cerrar' como al fondo opaco, realizan la misma acción. Por lo demás, está bien, aunque como estás usando métodos de jQuery, podrías utilizar otros métodos de animación, para darle así un efecto especial al mostrado/ocultado de la ventana modal.

Usando los métodos fadeIn y fadeOut


Usando los métodos slideUp y slideDown (se consigue el mismo efecto con el método slideToggle)


Usando los métodos show y hide


Y hay más métodos que puedes encontrar aquí. Lee la documentación para que aprendas a usarlos.

Saludos