Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Ventana emergente o Pop Up

HTML - Ventana emergente o Pop Up

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

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

Ventana emergente o Pop Up

Publicado por Francisco (1 intervención) el 17/11/2018 23:41:34
Yo puse el código como dice pero no me sale la ventana emergente a continuación pongo el código, a ver si me pueden ayudar, y los archivos css los copié tal cual.
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <title>Crear Nuevo Usuario</title>
        <script src="js/jquery.js"></script>
        <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>
    </head>
    <body>
        <?php
 
            // Conectar a la base de datos
            $conexion = mysqli_connect("localhost", "root", "", "quinielasbd");
 
            // Comprobar si la conexión es correcta
            if(mysqli_connect_errno()){
                echo "La conexión a la base de datos MySQL ha fallado: ".mysqli_connect_error();
            }else{
                echo "Conexión realizada correctamente!!";
            }
 
            echo "<br/>";
 
            // Consulta para configurar la codificación de caracteres
            mysqli_query($conexion, "SET NAMES 'utf8'");
 
            // Consulta SELECT desde PHP
            $sql = "select * from clientes where nombre = 'Rogelia'";
            $query = mysqli_query($conexion, $sql);
 
            //$registro = mysqli_fetch_assoc($query);
 
            if(mysqli_num_rows($query) == 0){
                echo "El nombre de usuario no existe";
                $status = "El nombre de usuario no existe";
                echo "<script language='JavaScript'> alert($status); </script>";
                //status es el contenido del error
 
            }else{
                echo "Ya existe ese nombre de usuario";
                $status = "Ya existe ese nombre de usuario";
                echo "<script language='JavaScript'> alert($status); </script>";
                //status es el contenido del error
 
            }
 
        ?>
        <script>
            openDialog();
        </script>
 
        <div id="popup" class="popup">
            <a onclick="closeDialog('popup');" class="close"></a>
            <div>
                <!-- YOUR CONTENT -->
                Mi texto
            </div>
        </div>
        <a href="" onclick="openDialog();">Mostrar Popup</a>
    </body>
</html>
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