Como hacer una ventana emergente con SweetAlert2

Desarrollo web

¡Hola amigo! ¿Cómo te encuentras hoy? ¿Que nuevos proyectos estas desarrollando? Te platico que yo he tenido unos días con bastante trabajo pero hoy me propuse escribir este articulo para ti y poderte mostrar como hacer una ventana emergente bonita y profesional para que las incluyas en tus próximos proyectos web. ¿Te animas a intentarlo?

Si sigues regularmente mi blog sabrás que me encanta compartirte ejemplos de desarrollo web y hoy te quiero mostrar como usar una librería javascript para la implementación de ventanas emergentes.

La librería que usaremos es SweetAlert2, como te mencione es una librería javascript que te permite crear ventanas emergentes con un diseño profesional y fácil de personalizar e implementar, es compatible con la mayoría de los navegadores web como: Edge, Chrome, Firefox, Safari, entre otros más.

Si te interesa también tengo un ejemplo para hacer una calculadora con JavaScript

Inicializar SweetAlert2

Lo primero que debes hacer es inicializar la librería en tu proyecto, para hacer esto simplemente debes incluir el script mediante el cdn o puedes descargar la librería y guardarla directamente en tu proyecto.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.26.10/dist/sweetalert2.all.min.js"></script>

Algunos ejemplos con sweetalert2

Una vez que has cargado la librería en tu proyecto podrás comenzar a crear nuevas ventanas emergentes, a continuación te muestro algunos ejemplos:

swal('Mi primer ventana con sweetalert2')

swal(
   '¿Estas seguro?',
   'El registro se eliminara totalmente',
   'question'
)

swal({
   type: 'error',
   title: 'Ups...',
   text: 'Parece que algo salio mal!',
   footer: 'Intenta más tarde'
})

swal({
  title: '¿Estas seguro?',
  text: "No podrás revertir esta acción",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Eliminar',
  cancelButtonText: 'Cancelar'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'El registro se elimino correctamente.',
      'success'
    )
  }
})

Estos son solo algunos ejemplos básicos con los que puedes aprender como hacer una ventana emergente pero recuerda que puedes visitar su sitio web para consultar la documentación y todos los tipos de ventanas emergentes que puedes crear.

No olvides compartir esta entrada en tus redes sociales, si tienes algún comentario o duda puedes dejármelo aquí abajo en el área de comentarios.

Que tengas un excelente día.  🙂

Como hacer una ventana emergente con SweetAlert2
5 (100%) 6 votos

Leave a Comment

Sígueme en redes sociales
  • como hacer un blog personal desde cero - denisse estrada
    Suscríbete al blog