修改alert的样式

最新推荐文章于 2023-02-15 10:00:57 发布

HerayChen

最新推荐文章于 2023-02-15 10:00:57 发布

阅读量1.3k

点赞数

分类专栏：笔记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_45832807/article/details/128920859

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

在这里插入图片描述

window.alert = function(str) {
    const style = `
			<style>
				.alert-modal {
                    position: fixed;
                    top: 50px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 300px;
                    padding: 12px;
                    background: #fff;
                    border-radius: 8px;
                    box-shadow: 0 1px 8px 0 #eee;
                }
                .alert-modal .circle {
                    margin-right: 10px;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    color: #fff;
                    background-color: #faad14;
                    border-radius: 50%;
                }
                .alert-modal img {
                    margin-right: 10px;
                    width: 20px;
                    height: 20px;
                }
                .alert-modal .val {
                    max-width: 200px;
                    white-space: pre-wrap;
                    word-break: break-all;
                    font-size: 14px;
                }
			</style>
		`;

    let head = document.getElementsByTagName('head')[0];
    // 将自定义 alert 的样式插入 head 中
    head.innerHTML += style;

    let content = document.createElement("div");
    let strHtml;
    strHtml = "<div class=\"alert-modal\" id=\"alertModal\">";
    // strHtml += " <img th:src=\"@{/imgs/warn.png}\" />";
    strHtml += "<div class=\"circle\">!</div>";
    strHtml += "<div class=\"val\">"+ str +"</div>";
    strHtml += "</div>";
    content.innerHTML = strHtml;
    document.body.appendChild(content);
    // 关闭弹窗
    setTimeout(function () {
        content.remove();
    }, 500)
}