修改系统默认 alert 弹框样式

我就是我 2021-09-17 09:52 613阅读 0赞

修改默认 alert 弹框，思路很简单，定义一个 alert(e) 函数，加载最开头即可。

css部分：

<style>
        #msg{
            width:266px;
            position: fixed;
            z-index:999;
            top: 49%;
            margin-top:-80px;
            left:50%;
            margin-left:-133px;
            background:#fff;
            box-shadow:5px 5px 8px #999;
            font-size:17px;
            color:#666;
            border:1px solid #f8f8f8;
            text-align: center;
            line-height: 2rem;
            display:inline-block;
            padding-bottom:20px;
            border-radius:2px;
        }
        #msg_top{
            background:#f8f8f8;
            padding:5px 15px 5px 20px;
            text-align:left;
        }
        #msg_top span{
            font-size:22px;
            float:right;
            cursor:pointer;
        }
        #msg_cont{
            padding:15px 20px 20px;
            text-align:left;
        }
        #msg_clear{
            display:inline-block;
            color:#fff;
            padding:1px 15px;
            background:#8fc31f;
            border-radius:2px;
            float:right;
            margin-right:15px;
            cursor:pointer;
        }
    </style>

因为弹框是通过js后期加入的，所以高宽是无法通过js获取的，所以要让弹框居中在窗口中要自己定义一下宽度；或者最外层包一个width:100% 的块，让弹框在这个块中居中

js部分：

<script>
    
    window.alert =alert;
        function alert(e){
            $("body").append('<div id="msg"><div id="msg_top">信息<span class="msg_close">×</span></div><div id="msg_cont">'+e+'</div><div class="msg_close" id="msg_clear">确定</div></div>');
            $(".msg_close").click(function (){
                $("#msg").remove();
            });
        }
    </script>

进行调用

alert("123");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70]: /images/20210812/64632aac6c2b4b18aa061aeda9b56a8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，613人围观）

还没有评论，来说两句吧...

相关阅读

相关 java工作复习——JavaScript的3个弹框对比总结——JavaScript的Alert弹框——confirm弹框 ——prompt弹框...

引入包：import org.openqa.selenium.Alert; js的alert弹框 Alert alert = driver.switchTo().al

冷不防/ 2023年10月03日 17:03/ 0 赞/ 54 阅读

相关修改Element UI默认样式

方法一：去掉scoped 方法二: 不去掉scoped，类名前使用/deep/ /deep/.el-timeline-item__node { bac

不念不忘少年蓝@/ 2022年12月26日 08:20/ 0 赞/ 349 阅读

相关 Element MessageBox 弹框 $alert的使用

import { MessageBox } from "element-ui"; MessageBox.alert("未授权，请先登录", "提示",

比眉伴天荒/ 2022年12月25日 10:00/ 0 赞/ 463 阅读

相关修改默认滚动条样式

修改默认滚动条样式 ::-webkit-scrollbar-track-piece { /滚动条里面轨道/ background-color:f5f5f5; bo

- 日理万妓/ 2022年06月13日 07:25/ 0 赞/ 332 阅读

相关封装alert弹窗样式

开发过程中，有些样式也是要注重美观的，对此，我们可以对一些基层方法做一些样式处理，是效果看起来更加的符合整体样式。 function alertInfo(message)\{

忘是亡心i/ 2022年05月12日 15:54/ 0 赞/ 336 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 361 阅读

相关 input type=['date', 'week']输入框，默认样式修改

H5自带的日期等选择框默认样式略不漂亮，一般使用时候都需要自行自定义一下。以type=“week”为例，原本样子 > `<input type="week" class=

ゞ浴缸里的玫瑰/ 2022年03月14日 11:52/ 0 赞/ 383 阅读

相关 layui layer弹出框alert,confim

layer.confirm('内容', { yes:function(){ layer.closeAll();//确认按钮如果不

Myth丶恋晨/ 2022年02月04日 08:45/ 0 赞/ 614 阅读

相关 css样式之input输入框默认样式

帮朋友写个简单的课程设计，后面会贴出来，项目刚开始就遇到一个坑（给input输入框设定样式，但是，点击后会出现蓝色边框），之前写其他的项目时也遇到过，百度一下资料解决了，现在又

Love The Way You Lie/ 2021年12月24日 11:11/ 0 赞/ 955 阅读

相关修改系统默认 alert 弹框样式

修改默认 alert 弹框，思路很简单，定义一个 alert(e) 函数，加载最开头即可。 css部分： <style> msg{

我就是我/ 2021年09月17日 09:52/ 0 赞/ 614 阅读