自定义alert样式

最新推荐文章于 2025-06-26 10:14:11 发布

原创最新推荐文章于 2025-06-26 10:14:11 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #前端 #alert

工作总结专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript自定义Alert对话框的样式，通过修改CSS实现个性化设计，达到与系统默认样式不同的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码：

function alert(msg, url) {
    if($('.popAlert').length > 0) {
        // return false;
    }
    var maskElm = $('<section />').addClass('popMask').appendTo('body');
    var alertElm = $('<section />').addClass('popAlert').appendTo('body');
    var messageElm = $('<div />').addClass('popCnt').html(msg || '').appendTo(alertElm);
    var yesElm = $('<span/>').addClass('popBtn').text('确定').appendTo(alertElm);
    maskElm.show();
    alertElm.show();
    maskElm.add(yesElm).bind('click', function() {
        maskElm.hide(0, function() {
            $(this).remove();
        })
        alertElm.hide(0, function() {
            $(this).remove();
        })
    })
    if(url && url != "") {
        yesElm.bind('click', function() {
            location.href = url;
        })
    }
}

css样式

/*----------------------alert弹出层----------------------*/
.popAlert { display:none; position:fixed; z-index:100; left:50%; top:50%; margin:-390px 0 0 -260px; width:520px; padding-bottom:50px; background-color:#181713; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:#FFFFFF ;}
.popCnt { padding:70px 40px 30px 40px; line-height:40px; font-size:28px; text-align:center; color:#333; }
.popBtn,
.popBtn:hover,
.popBtn:visited,
.popBtn:active { display:block; width:240px; height:60px; margin:0 auto; line-height:60px; background:none; text-align:center; color:#fff;font-size:25px;border-radius: 5px;background-color:#231c84 ; }
.popMask { display:none; position:fixed; z-index:99; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); }

样式变更只需要修改css即可。。。