HTML - Ventana emergente o Pop Up

   
Vista:

Ventana emergente o Pop Up

Publicado por Julio (2 intervenciones) el 22/04/2015 05:49:05
Tengo la duda de como hacer este tipo de ventanas más bien llamadas como Pop up! Que la ventana tenga la "X" para cerrarla y que el fondo se haga opaco o se ponga obscuro, y que cuando le de click en una parte de afuera de la ventana se cierre al igual que darle click en la "X"! Les dejo una imagen para que vean lo que quiero hacer!
div
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel Komander

Ventana emergente o Pop Up

Publicado por Angel Komander (101 intervenciones) el 22/04/2015 06:04:23
Primero Agregas la Librería de Jquery ;)

Despues de la Librería agrega este JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function openDialog() {
    $('#overlay').fadeIn('fast', function() {
        $('#popup').css('display','block');
        $('#popup').animate({'left':'30%'},500);
    });
}
 
function closeDialog(id) {
    $('#'+id).css('position','absolute');
    $('#'+id).animate({'left':'-100%'}, 500, function() {
        $('#'+id).css('position','fixed');
        $('#'+id).css('left','100%');
        $('#overlay').fadeOut('fast');
    });
}
</script>

Ahora en el Body:
1
2
3
4
5
6
<div id="popup" class="popup">
    <a onclick="closeDialog('popup');" class="close"></a>
    <div>
        <!-- YOUR CONTENT -->
    </div>
</div>

Tus Estilos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.popup {
    background-color: #ffffff;
    color: #888888;
    height: 245px;
    left: 100%;
    padding: 20px;
    position: fixed;
    right: 30%;
    top: 25%;
    width: 550px;
    z-index: 101;
    -moz-box-shadow: 0px 0px 10px 1px #888888;
    -webkit-box-shadow: 0px 0px 10px 1px #888888;
    box-shadow: 0px 0px 10px 1px #888888;
    border-radius:10px;
    -moz-border-radius:10px;
}
 
.overlay {
    background: #000000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    opacity:0.5;
}
 
a.close {
    background: url("cancel.png") repeat scroll left top transparent;
    cursor: pointer;
    float: right;
    height: 26px;
    left: 32px;
    position: relative;
    top: -33px;
    width: 26px;
}

Esto es Opcional para que habran de nuevo el Popup:
1
<a onclick="openDialog();">Mostrar Popup</a>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Ventana emergente o Pop Up

Publicado por Jorge Morales (1 intervención) el 03/06/2016 21:06:01
Hola! y gracias por tu tutorial.
Consulta: tengo la imagen que quiero que se desplegue como indicas, pero no se donde debo ponerla (codigo en Dreamweaver me refiero)
Por otro lado, es posible que esta imagen se abra cuando se inicia la pagina?
Muchas gracias por la ayuda!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar