如何在引导程序中设置 window.alert 样式答案

【问题标题】：How to style window.alert in bootstrap如何在引导程序中设置 window.alert 样式
【发布时间】：2020-08-05 12:05:26
【问题描述】：

如何在 Bootstrap 中设置window.alert 的样式？

代码示例：

something
    .then(res => res.json())
    .then(
        result => {
            console.log(result);
            window.alert(result.description);
            window.location.reload();
        },
        error => {
            console.log(error);
            window.alert(result.description);
            window.location.reload();
        }
    );

【问题讨论】：

浏览器警告对话框无法设置样式。这是从不使用它的原因之一。使用模式对话框来显示您的警报和样式。

标签： javascript css reactjs bootstrap-4

【解决方案1】：

你不能设置窗口alert，你可以使用引导程序modal而不是alert。

更多信息请访问：https://getbootstrap.com/docs/4.0/components/modal/

【讨论】：

【解决方案2】：

这些变更窗口的样式由浏览器定义。您必须编写自己的浏览器：D

另一种选择可能是 Toasts 消息。

【讨论】：

【解决方案3】：

不确定这是否适用于您的情况，但这对我来说是可能的。您可以将警报附加到元素并使用引导标记将 innerHTML 设置为 html。就我而言，这是一个捕获消息的精简请求：

destroyRock(div){
    useAPI.deleteFetch("rocks", this.id)
    .then(jsonToJS).then(message => this.graduate(message, div))
    ...
}

带有常规窗口警报的下一个功能：

graduate(m, div){
    div.remove()
    window.alert(m.message)
}

使用引导警报之后：

graduate(m, div){
    div.remove()
    const nav = document.getElementById("mainNav")
    let alert = document.createElement("div")
    const gradAlert = `
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>Congrats!</strong> ${m.message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        `
    alert.innerHTML = gradAlert
    nav.append(alert)
}

我不喜欢将它附加到导航上，所以我将更多地讨论它的去向，但希望这对未来的人有所帮助！

【讨论】：