如何在 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;
    }
});

My SweetAlert

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 documentation 开始，您可以自定义主题...要在墙 body 中有一个滚动条，我会使用 swal-text class 和为它定义一个 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>

EDIT using SweetAlert for Bootstrap，思路是一样的，只是class名字不同。在这里，不是 .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">

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

How to create / activate a vertical scroll bar within a swal (SweetAlert)

javascript

asp.net-mvc

jquery

sweetalert

sweetalert2