Uma novidade que descobri é o plugin SweetAlert2 em JavaScript, que é uma alternativa para substituir aquelas mensagens default dos navegadores nada bonitas.

Como é o alerta default do navegador:

Aquele velho código $window.confirm()

Como fica com o SweetAlert2:

Não é muito mais agradável?

O SweetAlert2 possui várias qualidades, como ser visualmente agradável (vamos concordar é super fofo), além de ser responsivo, fácil de customizar, segue os princípios WAI-ARIA de acessibilidade, e possui integração com Angular e React.

Além é claro de ser ZERO dependências!

Para usar em seus projetos, basta instalar como dependência NPM:

$ npm install sweetalert2

Ou, usar o link de CDN:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

Como usá-lo em seu projeto

Basta incluir os arquivos JS minificados no seu projeto:

<script src="sweetalert2.all.min.js"></script>
<!-- Optional: include a polyfill for ES6 Promises for IE11 and Android browser -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

Ou ainda, usá-lo como dependência de seu projeto:

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS
const Swal = require('sweetalert2')

E para usar, basta copiar o código abaixo:

Swal.fire({
  title: 'Tem certeza que deseja excluir?',
  type: 'warning',
  confirmButtonText: 'Ok',
  cancelButtonText: ‘Cancelar’
});

Ele possui várias propriedades para customização, tanto de texto, tipo da mensagem, se é: success, error, info, warning e question. Além de ícones e animações, alterações de classes de botões, e dá até para colocar uma imagem no alerta.

Garanto que você vai se divertir ao usá-lo!

Confira mais no site: https://sweetalert2.github.io

---

Para projetos internos da AZ

Se o seu projeto utiliza o "HAL-WIDGETS", a partir da versão 3.3.1, o SweetAlert2 é uma dependência dele. Para utilizar esse recurso, basta injetar a dependência "azConfirmService", e usar o método "showConfirm()", como no exemplo a seguir:

export default ['azConfirmService',
    function (azConfirmService) {
    
         $scope.excluirClick = function () {
            azConfirmService
                .showConfirm('Tem certeza que deseja excluir?')
                .then(function (result) {
                        if (result.value) {
                           ...
                        }
                 });
         };
         
    }
];

O resultado na tela fica assim:

SweetAlert2 é usado na versão 2.0 do E-fornecedor

No "HAL-WIDGETS" há mais parâmetros que podem ser customizados, confira:

that.showConfirm = function (title, text, type = 'warning', showCancelButton = true, confirmButtonText = 'Ok', cancelButtonText = 'Cancelar') {
    return Swal.fire({
        title,
        text,
        type,
        showCancelButton,
        confirmButtonText,
        cancelButtonText,
        padding: '2.25em'
    });
};

Fique a vontade para experimentar em seus novos projetos! Lembrando que o SweetAlert2 é compatível com a maioria dos navegadores e versões 🙌

Até a próxima o/