Configurar Ventana Emergente

ivancheaib1 · #1 (**permalink**) 28/06/2014, 13:41

Buenas amigos y colegas, se que lo que pregunto quizas sea cosa sencilla para muchos pero agradeceria la ayuda de ustedes.
ses consulto algo, estoy queriendo colocar una ventana "pop up" para mi web, que al entrar en la web salte una ventana para colocar publicidad o alguna imagen de promocion de mis servicios, y linkear a esa promo dejo un ejemplo de pagina web con el pop up que quiero hacer :[URL="http://www.hijole.com.py/ofertas/"]http://www.hijole.com.py/ofertas/[/URL] mas o menos asi
me ayudaria mucho
Gracias

hhs · #2 (**permalink**) 28/06/2014, 18:35

Esta no es una pregunta para este foro; te recomiendo que hagas la pregunta en el foro de html o javascript

GoldWar · #3 (**permalink**) 28/06/2014, 19:08

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>

ivancheaib1 · #4 (**permalink**) 29/06/2014, 16:02

Muchas gracias por el aporte lo probare, y disculpen si no mi solicitud no fue en el lugar adecuado lo tendre en cuenta

ivancheaib1 · #5 (**permalink**) 29/06/2014, 16:05

el tema es que yo quiero que aparezca al iniciar la pagina, al colocar www.miempresa.com y ahi abra automaticamente, no tener que pinchar algo para que abra :S

GoldWar · #6 (**permalink**) 29/06/2014, 18:07

Cita:

Iniciado por ivancheaib1

el tema es que yo quiero que aparezca al iniciar la pagina, al colocar www.miempresa.com y ahi abra automaticamente, no tener que pinchar algo para que abra :S

Tu solución es el Javascript pero como ya dijo un moderador del foro este no es el área de ese tipo de proyectos por tanto yo ya te pasé el código pero necesitarás preguntar como ejecutarlo al iniciar la web en el foro de Javascript.