Esta pregunta es de HTML5 y CSS3.
Pero ya que se pues te ayudo aunque no vaya aquí.
Este es tu código. Se ejecuta pulsando en el link pero si usas algo de javascript puedes ejecutarlo al entrar en la web. Eso ya es cosa tuya pero si tu web no es muy interesante no lo uses de esa forma por que echa para atrás a muchos usuarios sobre todo de móviles y tablets.
No te voy a explicar todo el código. Ya lo tenia hecho solo cambié algunas partes. El CSS3 es difícil de entender a simple vista pero cuando lo usas a menudo resulta fácil.
Código HTML:
<!DOCTYPE html>
<style>
a#login_pop:hover, a#join_pop:hover {
border-color: #31b2c3; background:#31b2c3;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup h2{color:#07839f; line-height:1.8em}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%; color:#666;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
visibility: visible;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
margin-bottom: 10px;
}
.popup label {
display: inline-block;
text-align: left;
width: 180px;
}
.popup input[type="text"] {
margin: 0;
padding: 4px; background:#d8f6fd;
border: 1px solid #66c8de;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
background: #fff
}
</style>
<body>
<a href="#join_form" id="join_pop" >POP UP</a>
<a href="#x" class="overlay" id="join_form"></a>
<div class="popup">
<h2>TITULO</h2>
<p>Visita GoldWar! jeje habia que aprovechar:
<a href="http://goldware.es" target="_blank">GOLD WAR!</a></p>
<div>
<label for="lastname">EJEMPLO</label>
<input type="text" id="EJEMPLO" value="" />
</div>
<input type="button" value="BOTON" />
<a class="close" href="#close"></a>
</div>
</body>
</html>