如何在 swal 中创建/激活垂直滚动条 (SweetAlert)

Question

我不知道这是否可行，但是是否有可能在 swal SweetAlert 警报模式下激活或创建垂直滚动条？

甜蜜警报

问题是我收到了非常大的错误列表，并且超出了模式显示限制。

   $.ajax({

    url: "/financeiro-gerenciar/remover-financeiro",

    type: "POST",

    data: { ids: selecedtRows },

    traditional: true,

    success: function (result) {

        stopLoadGlobal();

        //Desmarcar o select do header

        $("#dtFinanceiroIndex .selectable-all").prop('checked', false);

        reload_dtFinanceiroIndex();

        if (result.success) {

            swal("Sucesso", result.message + " :)", "success");

            return false;

        }

        else {

            //console.log(result.errors.value.errors)

            if (!result.success) {

                var errosRecebidos = result.message + "\n";

                $.each(result.errors.value.errors, function (key, value) {

                    errosRecebidos = errosRecebidos + '\n' + value

                });

            } 

            swal("Atenção", errosRecebidos + " :(", "error");

            return false;

        }

    },

    error: function () {

        stopLoadGlobal();

        alert("Oops! Algo deu errado.");

        return false;

    }

});  

我的甜蜜警报

CSS：

.sweet-overlay {

    /*z-index: 100000000000 !important;*/

    z-index: 999999999 !important;

}

.sweet-alert {

    /*z-index: 100000000000 !important;*/

    z-index: 999999999 !important;

}

.sweet-alert .swal-text {

    max-height: 6em; /* To be adjusted as you like */

    overflow-y: scroll;

    width: 100%;

}

Answer 1

从swal 文档中，您可以自定义主题...为了在 swall 主体中有一个滚动条，我将使用该类swal-text并为其定义一个max-height和。overflow-y:scroll// simulating the Ajax result here...let errosRecebidos = ""// supposing you have 324 errors lol!for(i=0;i<324;i++){  errosRecebidos += "Error #"+i+"\n"}swal("Atenção", errosRecebidos + " :(", "error").swal-text{  max-height: 6em;  /* To be adjusted as you like */  overflow-y: scroll;  width: 100%;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>使用SweetAlert for Bootstrap进行编辑，想法是相同的，但类名不同。.swal-text在这里，它不是，.sweet-alert而是“消息”容器（除了标题和按钮）是p。// simulating the Ajax result here...let errosRecebidos = ""// supposing you have 324 errors lol!for(i=0;i<324;i++){  errosRecebidos += "Error #"+i+"\n"}swal("Atenção", errosRecebidos + " :(", "error").sweet-alert p{  max-height: 6em;  /* To be adjusted as you like */  overflow-y: scroll;  width: 100%;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css">