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

Posted 2023-03-06

【中文标题】如何在引导程序中设置 window.alert 样式

【英文标题】：How to style window.alert in bootstrap

【发布时间】：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();
        
    );

【问题讨论】：

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

【参考方案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)

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