SweetAlert y jQuery

Estrada Web Group

Calificar:

★ ★ ★ ★ ★

18 junio JavaScri..

Mensajes de notificación profesionales al usuario con SweetAlert y jQuery

En la actualidad, ofrecer una experiencia de usuario (UX) de calidad es esencial para cualquier aplicación web. Una parte fundamental de esa experiencia es la comunicación con el usuario. Aquí es donde entran en juego las notificaciones y alertas.

Mientras que JavaScript nos proporciona una función básica llamada alert para mostrar notificaciones, su apariencia y funcionalidad son bastante básicas y no se adaptan bien a las necesidades modernas. Por fortuna, existen bibliotecas como SweetAlert que nos permiten crear notificaciones mucho más atractivas y funcionales.

¿Qué es SweetAlert?

SweetAlert es una biblioteca independiente que nos permite mostrar alertas muy atractivas al usuario. Aunque puede funcionar sin jQuery, también ofrece una integración con esta popular biblioteca, lo que facilita su uso si ya estás trabajando con jQuery en tu proyecto.

Las principales características de SweetAlert incluyen:

Diseño Moderno: Las alertas tienen un diseño fresco y moderno que se adapta a las tendencias actuales de diseño.
Responsividad: SweetAlert se centra automáticamente y se ve bien tanto en dispositivos de escritorio como móviles.
Personalización: Puedes configurar las alertas según tus necesidades, incluyendo títulos, textos, iconos y más.

Implementando SweetAlert en tu proyecto

Para empezar a usar SweetAlert en tu proyecto, sigue los siguientes pasos:

Incluye los archivos necesarios: Asegúrate de incluir jQuery (si vas a usarlo) y SweetAlert.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Crea tus botones de activación: Estos botones servirán para disparar las diferentes notificaciones que desees mostrar.

<table class="table table-bordered">
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Basic alert
            </td>
            <td>
                <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_1">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Alert title and text
            </td>
            <td>
                <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo_2">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Enable
                <code>
                    warning
                </code>
                ,
                <code>
                    error
                </code>
                ,
                <code>
                    success
                </code>
                ,
                <code>
                    info
                </code>
                and
                <code>
                    question
                </code>
                state icons
            </td>
            <td>
                <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo_3_1">
                    Warning
                </button>
                <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_3_2">
                    Error
                </button>
                <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_3_3">
                    Success
                </button>
                <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_3_4">
                    Info
                </button>
                <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo_3_5">
                    Question
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Change confirm button text and class
            </td>
            <td>
                <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_4">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Custom button with icon
            </td>
            <td>
                <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_5">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A custom positioned dialog with timer to auto close
            </td>
            <td>
                <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_6">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                jQuery HTML with custom animate.css animation
            </td>
            <td>
                <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo_7">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A warning message, with a function attached to the confirm button
            </td>
            <td>
                <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_8">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                By passing a parameter, you can execute something else for cancel
            </td>
            <td>
                <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_9">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A message with a custom image and CSS animation disabled
            </td>
            <td>
                <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo_10">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A message with auto close timer
            </td>
            <td>
                <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo_11">
                    Show me
                </button>
            </td>
        </tr>
    </table>

Configura tus notificaciones: Define las acciones que cada botón realizará al ser pulsado.

 //== Class definition
        var SweetAlert2Demo = function () {

            //== Demos
            var initDemos = function () {
                //== Sweetalert Demo 1
                $('#m_sweetalert_demo_1').click(function (e) {
                    swal('Good job!');
                });

                //== Sweetalert Demo 2
                $('#m_sweetalert_demo_2').click(function (e) {
                    swal("Here's the title!", "...and here's the text!");
                });

                //== Sweetalert Demo 3
                $('#m_sweetalert_demo_3_1').click(function (e) {
                    swal("Good job!", "You clicked the button!", "warning");
                });

                $('#m_sweetalert_demo_3_2').click(function (e) {
                    swal("Good job!", "You clicked the button!", "error");
                });

                $('#m_sweetalert_demo_3_3').click(function (e) {
                    swal("Good job!", "You clicked the button!", "success");
                });

                $('#m_sweetalert_demo_3_4').click(function (e) {
                    swal("Good job!", "You clicked the button!", "info");
                });

                $('#m_sweetalert_demo_3_5').click(function (e) {
                    swal("Good job!", "You clicked the button!", "question");
                });

                //== Sweetalert Demo 4
                $('#m_sweetalert_demo_4').click(function (e) {
                    swal({
                        title: "Good job!",
                        text: "You clicked the button!",
                        icon: "success",
                        confirmButtonText: "Confirm me!",
                        confirmButtonClass: "btn btn-focus m-btn m-btn--pill m-btn--air"
                    });
                });

                //== Sweetalert Demo 5
                $('#m_sweetalert_demo_5').click(function (e) {
                    swal({
                        title: "Good job!",
                        text: "You clicked the button!",
                        icon: "success",

                        confirmButtonText: "<span><i class='la la-headphones'></i><span>I am game!</span></span>",
                        confirmButtonClass: "btn btn-danger m-btn m-btn--pill m-btn--air m-btn--icon",

                        showCancelButton: true,
                        cancelButtonText: "<span><i class='la la-thumbs-down'></i><span>No, thanks</span></span>",
                        cancelButtonClass: "btn btn-secondary m-btn m-btn--pill m-btn--icon"
                    });
                });

                $('#m_sweetalert_demo_6').click(function (e) {
                    swal({
                        position: 'top-right',
                        type: 'success',
                        title: 'Your work has been saved',
                        showConfirmButton: false,
                        timer: 1500
                    });
                });

                $('#m_sweetalert_demo_7').click(function (e) {
                    swal({
                        title: 'jQuery HTML example',
                        html: $('<div>')
                            .addClass('some-class')
                            .text('jQuery is everywhere.'),
                        animation: false,
                        customClass: 'animated tada'
                    })
                });

                $('#m_sweetalert_demo_8').click(function (e) {
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!'
                    }).then(function (result) {
                        if (result.value) {
                            swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                        }
                    });
                });

                $('#m_sweetalert_demo_9').click(function (e) {
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',
                        reverseButtons: true
                    }).then(function (result) {
                        if (result.value) {
                            swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                            // result.dismiss can be 'cancel', 'overlay',
                            // 'close', and 'timer'
                        } else if (result.dismiss === 'cancel') {
                            swal(
                                'Cancelled',
                                'Your imaginary file is safe :)',
                                'error'
                            )
                        }
                    });
                });

                $('#m_sweetalert_demo_10').click(function (e) {
                    swal({
                        title: 'Sweet!',
                        text: 'Modal with a custom image.',
                        imageUrl: 'https://unsplash.it/400/200',
                        imageWidth: 400,
                        imageHeight: 200,
                        imageAlt: 'Custom image',
                        animation: false
                    });
                });

                $('#m_sweetalert_demo_11').click(function (e) {
                    swal({
                        title: 'Auto close alert!',
                        text: 'I will close in 5 seconds.',
                        timer: 5000,
                        onOpen: function () {
                            swal.showLoading()
                        }
                    }).then(function (result) {
                        if (result.dismiss === 'timer') {
                            console.log('I was closed by the timer')
                        }
                    })
                });
            };

            return {
                //== Init
                init: function () {
                    initDemos();
                },
            };
        }();

        //== Class Initialization
        jQuery(document).ready(function () {
            SweetAlert2Demo.init();
        });

Comentarios adicionales

Versión de jQuery: Estás utilizando una versión bastante antigua de jQuery (1.8.2). Considera actualizar a una versión más reciente para beneficiarte de las últimas correcciones y características, a menos que haya una razón específica para usar esa versión.
Bootstrap: Estás usando Bootstrap 3.3.0 para estilizar tus elementos. Si no necesitas una versión específica, considera actualizar a Bootstrap 4 o 5 para tener un diseño más moderno y características adicionales.
Ejemplos prácticos: Sería beneficioso añadir una breve descripción antes de cada botón, explicando qué hace cada ejemplo. Esto proporcionará contexto a los usuarios y les ayudará a entender mejor cada función de SweetAlert.

Espero que estos consejos te ayuden a mejorar tu artículo y a brindar una mejor experiencia a tus lectores. ¡Buena suerte!

Código completo

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Alert </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>

    <table class="table table-bordered">
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Basic alert
            </td>
            <td>
                <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_1">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Alert title and text
            </td>
            <td>
                <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo_2">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Enable
                <code>
                    warning
                </code>
                ,
                <code>
                    error
                </code>
                ,
                <code>
                    success
                </code>
                ,
                <code>
                    info
                </code>
                and
                <code>
                    question
                </code>
                state icons
            </td>
            <td>
                <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo_3_1">
                    Warning
                </button>
                <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_3_2">
                    Error
                </button>
                <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_3_3">
                    Success
                </button>
                <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_3_4">
                    Info
                </button>
                <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo_3_5">
                    Question
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Change confirm button text and class
            </td>
            <td>
                <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_4">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                Custom button with icon
            </td>
            <td>
                <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_5">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A custom positioned dialog with timer to auto close
            </td>
            <td>
                <button type="button" class="btn btn-success m-btn m-btn--custom" id="m_sweetalert_demo_6">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                jQuery HTML with custom animate.css animation
            </td>
            <td>
                <button type="button" class="btn btn-focus m-btn m-btn--custom" id="m_sweetalert_demo_7">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A warning message, with a function attached to the confirm button
            </td>
            <td>
                <button type="button" class="btn btn-info m-btn m-btn--custom" id="m_sweetalert_demo_8">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                By passing a parameter, you can execute something else for cancel
            </td>
            <td>
                <button type="button" class="btn btn-danger m-btn m-btn--custom" id="m_sweetalert_demo_9">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A message with a custom image and CSS animation disabled
            </td>
            <td>
                <button type="button" class="btn btn-warning m-btn m-btn--custom" id="m_sweetalert_demo_10">
                    Show me
                </button>
            </td>
        </tr>
        <tr>
            <td style="width: 40%; vertical-align: middle;">
                A message with auto close timer
            </td>
            <td>
                <button type="button" class="btn btn-metal m-btn m-btn--custom" id="m_sweetalert_demo_11">
                    Show me
                </button>
            </td>
        </tr>
    </table>
    <script>
        //== Class definition
        var SweetAlert2Demo = function () {

            //== Demos
            var initDemos = function () {
                //== Sweetalert Demo 1
                $('#m_sweetalert_demo_1').click(function (e) {
                    swal('Good job!');
                });

                //== Sweetalert Demo 2
                $('#m_sweetalert_demo_2').click(function (e) {
                    swal("Here's the title!", "...and here's the text!");
                });

                //== Sweetalert Demo 3
                $('#m_sweetalert_demo_3_1').click(function (e) {
                    swal("Good job!", "You clicked the button!", "warning");
                });

                $('#m_sweetalert_demo_3_2').click(function (e) {
                    swal("Good job!", "You clicked the button!", "error");
                });

                $('#m_sweetalert_demo_3_3').click(function (e) {
                    swal("Good job!", "You clicked the button!", "success");
                });

                $('#m_sweetalert_demo_3_4').click(function (e) {
                    swal("Good job!", "You clicked the button!", "info");
                });

                $('#m_sweetalert_demo_3_5').click(function (e) {
                    swal("Good job!", "You clicked the button!", "question");
                });

                //== Sweetalert Demo 4
                $('#m_sweetalert_demo_4').click(function (e) {
                    swal({
                        title: "Good job!",
                        text: "You clicked the button!",
                        icon: "success",
                        confirmButtonText: "Confirm me!",
                        confirmButtonClass: "btn btn-focus m-btn m-btn--pill m-btn--air"
                    });
                });

                //== Sweetalert Demo 5
                $('#m_sweetalert_demo_5').click(function (e) {
                    swal({
                        title: "Good job!",
                        text: "You clicked the button!",
                        icon: "success",

                        confirmButtonText: "<span><i class='la la-headphones'></i><span>I am game!</span></span>",
                        confirmButtonClass: "btn btn-danger m-btn m-btn--pill m-btn--air m-btn--icon",

                        showCancelButton: true,
                        cancelButtonText: "<span><i class='la la-thumbs-down'></i><span>No, thanks</span></span>",
                        cancelButtonClass: "btn btn-secondary m-btn m-btn--pill m-btn--icon"
                    });
                });

                $('#m_sweetalert_demo_6').click(function (e) {
                    swal({
                        position: 'top-right',
                        type: 'success',
                        title: 'Your work has been saved',
                        showConfirmButton: false,
                        timer: 1500
                    });
                });

                $('#m_sweetalert_demo_7').click(function (e) {
                    swal({
                        title: 'jQuery HTML example',
                        html: $('<div>')
                            .addClass('some-class')
                            .text('jQuery is everywhere.'),
                        animation: false,
                        customClass: 'animated tada'
                    })
                });

                $('#m_sweetalert_demo_8').click(function (e) {
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!'
                    }).then(function (result) {
                        if (result.value) {
                            swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                        }
                    });
                });

                $('#m_sweetalert_demo_9').click(function (e) {
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',
                        reverseButtons: true
                    }).then(function (result) {
                        if (result.value) {
                            swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                            // result.dismiss can be 'cancel', 'overlay',
                            // 'close', and 'timer'
                        } else if (result.dismiss === 'cancel') {
                            swal(
                                'Cancelled',
                                'Your imaginary file is safe :)',
                                'error'
                            )
                        }
                    });
                });

                $('#m_sweetalert_demo_10').click(function (e) {
                    swal({
                        title: 'Sweet!',
                        text: 'Modal with a custom image.',
                        imageUrl: 'https://unsplash.it/400/200',
                        imageWidth: 400,
                        imageHeight: 200,
                        imageAlt: 'Custom image',
                        animation: false
                    });
                });

                $('#m_sweetalert_demo_11').click(function (e) {
                    swal({
                        title: 'Auto close alert!',
                        text: 'I will close in 5 seconds.',
                        timer: 5000,
                        onOpen: function () {
                            swal.showLoading()
                        }
                    }).then(function (result) {
                        if (result.dismiss === 'timer') {
                            console.log('I was closed by the timer')
                        }
                    })
                });
            };

            return {
                //== Init
                init: function () {
                    initDemos();
                },
            };
        }();

        //== Class Initialization
        jQuery(document).ready(function () {
            SweetAlert2Demo.init();
        });
    </script>
</body>

</html>

Compartir:

Descarga el código fuente

Obten el código del sistema de gestión de proyectos.

Descargar

Mensajes de notificación profesionales al usuario con SweetAlert y jQuery

¿Qué es SweetAlert?

Implementando SweetAlert en tu proyecto

Comentarios adicionales

Código completo

Compartir:

Categorías

Artículos recientes

Cómo comprobar si un checkbox está seleccionado con jQuery y Javascript

Cambiar el valor seleccionado en un combobox o select con javascript y jquery

Cómo agregar código JavaScript en una página HTML

¿Cómo agregar un elemento a un array en JavaScript?

Las 3 mejores formas para concatenar cadenas de texto en JavaScript

Tags Populares

Redes Sociales:

Descarga el código fuente

Obten el código del sistema de gestión de proyectos.

Ciudad de México

Categorías

Quick Links

¡Descubre el Futuro!

Configuración de cookies

Mensajes de notificación profesionales al usuario con SweetAlert y jQuery

¿Qué es SweetAlert?

Implementando SweetAlert en tu proyecto

Comentarios adicionales

Código completo

Compartir:

Categorías

Artículos recientes

Cómo comprobar si un checkbox está seleccionado con jQuery y Javascript

Cambiar el valor seleccionado en un combobox o select con javascript y jquery

Cómo agregar código JavaScript en una página HTML

¿Cómo agregar un elemento a un array en JavaScript?

Las 3 mejores formas para concatenar cadenas de texto en JavaScript

Tags Populares

Redes Sociales:

Descarga el código fuente

Obten el código del sistema de gestión de proyectos.

Ciudad de México

Categorías

Quick Links

¡Descubre el Futuro!

IA-Chat EWG

Configuración de cookies