Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » MODAL DE UN MENSAJE PHP

CSS - MODAL DE UN MENSAJE PHP

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

MODAL DE UN MENSAJE PHP

Publicado por Miriam (2 intervenciones) el 20/11/2022 14:43:34
Hola.

Tengo una aplicación que cuando borro una receta o producto me sale un mensaje que dice si la recetas se ha borrado correctamente o no.

1
2
3
<div>
            <p><?php echo $mensaje; ?></p>
          </div>

¿Sabéis como puedo hacer que este mensaje salte en una ventana modal?

Muchas gracias,
saludos.
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

MODAL DE UN MENSAJE PHP

Publicado por Kathyu (30 intervenciones) el 22/11/2022 18:18:21
Hace un par de años use SweetAlert para dicho propósito y le diré que el resultado es impresionante.

En menos de 5 minutos le hice este breve ejemplo donde lo puede poner en practica y hacer lo que usted quiera

Código de ejemplo sin poner mayor cuidado en las buenas practicas...
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
<!Doctype html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.4.24/sweetalert2.all.js"></script>
    </head>
    <body>
        <form method="post">
            <input name="name" type="text" placeholder="Name">
            <input name="mail" type="text" placeholder="Email">
            <input name="sub" type="submit" value="Submit">
        </form>
        <?php
    if(isset($_POST['sub'])){
        $name=$_POST['name'];
        $email=$_POST['mail'];
        if(empty($name) || empty($email)){
        ?>
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Invalid',
                text: 'Debe Escribir algo'
            })
        </script>
        <?php
        }
        else{
        ?>
            <script>
            Swal.fire({
                icon: 'success',
                title: 'Listo !!!',
                text: 'Nombre ' + "<?php echo $name ?> y correo " + "<?php echo $email ?>"
            })
        </script>
        <?php
        }
}
?>
    </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
2
Comentar
sin imagen de perfil

MODAL DE UN MENSAJE PHP

Publicado por Miriam (2 intervenciones) el 22/11/2022 18:32:49
Gracias!! Lo probaré aunque ya he conseguido hacerlo!!
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
Imágen de perfil de Marcelo

MODAL DE UN MENSAJE PHP

Publicado por Marcelo (2 intervenciones) el 11/12/2022 03:21:36
sweetalert2, alertifyjs, micromodal, etc,
saludos.
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
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

MODAL DE UN MENSAJE PHP

Publicado por ScriptShow (125 intervenciones) el 17/12/2022 22:48:30
Saludos,

un Modal en CSS Nativo, creado desde cero; compatible, adaptable, etc.

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
<!DOCTYPE html>
<html>
<title>Modal CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
/*
// ====================================
// ScriptShow Web © 2000 - 2020
// Experiments by 2K code © 2000 - 2020
// ====================================
*/
 
* {
border: 0px;
box-sizing: border-box;
font-family: "Arial", sans-serif;
transition: all .8 ease;
}
.modal {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 24px;
display: none;
color: #FFFFFF;
overflow: auto;
position: fixed;
font-size: 28px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
}
.modal:target {
display: block;
position: absolute;
}
.close {
float: right;
color: #FFFFFF;
font-size: 28px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#md01">Modal 01</a>
<div id="md01" class="modal">
<a href="#" class="close">x</a>
<h2>Modal Header 01</h2>
<p>Text of Modal 01, etc...</p>
</div>
<a href="#md02">Modal 02</a>
<div id="md02" class="modal">
<a href="#" class="close">x</a>
<h2>Modal Header 02</h2>
<p>Text of Modal 02, etc...</p>
</div>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Marcelo

MODAL DE UN MENSAJE PHP

Publicado por Marcelo (2 intervenciones) el 19/12/2022 22:45:26
tambien podrias agregar un contenedor al modal,
con background:black y opacity,
despues al modal hacerle un boxshadow suaves de color blanco para que sea estilo lightbox.

w3school hace algun tiempo tenia unos modales asi,
como cambian muchos las tendencias uno ya no sabe si estan.
saludos.
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
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

MODAL DE UN MENSAJE PHP

Publicado por ScriptShow (125 intervenciones) el 20/12/2022 00:28:26
Ha pasado más de una década cuando se hacían Lightbox con CSS y JavaScript, combinación conocida como DHTML..
Llegaron las librerías... Los frameworks... Y, nuevamente, con CSS3 y HTML5, intentamos volver a la "normalidad".
En realidad, la tendencia es a simplificar en lo posible. Un lema, inspirado en la Era Industrial, más de 100 años atrás, es ahora: "more code, more problems". Tiene toda la vigencia que ha tenido durante tanto tiempo...
Las estimaciones en cuanto al Diseño Web, en términos Ui / Ux, son las bases para ofrecer un atractivo y navegable diseño.
La realidad apunta a que, un/a usuario/a, permanece entre 2, 4, minutos en un Sitio Web, si le resulta interesante. Por tanto, hay que mostrar todo con el mínimo de clicks posibles. Siempre con una Interface que cause sensación a primera vista. Lo de "menos es más", desde el Minimalismo, continúa de "moda", sin saberlo incluso. Una evidencia es Goog... En fin...

Algunos Sitios Web relacionados:

https://httpster.net/style/minimal/

https://www.siteinspire.com/websites?categories=14

Un saludo
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