.modal{
    display:none;
    position:fixed;
    z-index:1;
    padding-top: 40px; /* Posición donde se coloca la caja */
    left:0;
    top:0;
    width:100%; /* Anchura completa de la pantalla */
    height: 100%; /* Altura completa de la pantalla */
    overflow:auto; /* Habilita el scroll si es necesario */
    background-color: rgb(0,0,0); /* Rellena de color negro la pantalla */
    background-color: rgba(0,0,0,0.4); /*  Pone negro claro */
}
/* Contenido del modal */
.modal-content{
    position:relative;
    background-color: #fefefe;
    margin:auto;
    padding:0;
    border:1px solid #888;
    width:40%; /* Anchura de la caja de aviso */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2) 0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name:animatetop; /* Para el navegador safari */
    -webkit-animation-duration:0.4s;  /* Para el navegador safari */
    animation-name:animatetop;
    animation-duration:0.4s;         
}

/* Añadimos la animación */
@-webkit-keyframes animatetop{
    from{top:-300px;opacity:0;}
    to{top:0;opacity:1;}
}

@keyframes animatetop{
    from{top:-300px;opacity:0;}
    to{top:0;opacity:1;}
}
/* Color de la X de cerrar */
.close{
    color:white;
    float:right; /* Color mi X a la derecha del cuadro */
    font-size:28px;
    font-weight: bold;
}
.close:hover,.close:focus{
    color:#000;
    text-decoration: none;
    cursor:pointer; /* Muestro el puntero de la manita */
}
.modal-header{
    padding: 15px 16px;
    background-color: red;
    color:white;
}
.modal-body{
    padding:15px 16px;
}