如何在Bootstrap中样式化window.alert

Question

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

- Arosha

---

浏览器警告对话框无法进行样式设置，这就是永远不要使用它的原因之一。请使用模态对话框来显示您的警报并设置其样式。 - VLAZ

Answer 1

无法样式化窗口 alert，可以使用 Bootstrap 的 modal 替代。

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

- Hien Nguyen

Answer 2

这些修改窗口的样式由浏览器定义。 你需要编写自己的浏览器 :D 另一种选择可能是使用 Toasts 消息。

- gapsong

Answer 3

不确定这是否适用于您的情况，但我曾尝试过。您可以将警告附加到一个元素上，并使用引导程序标记设置innerHTML为HTML。在我的情况下，以下是截取消息的请求：

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

使用常规窗口警报的下一个函数 BEFORE：

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

使用 Bootstrap 警告框的 AFTER：

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)
}

我不喜欢它附加在导航栏上，所以我会再试试看放在哪里更好，但希望这能帮助未来的某个人！

- Zoe Friedman