修改系统默认 alert 弹框样式

我就是我 2021-09-17 09:52 644阅读 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 条评论，644人围观）

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

相关阅读

相关 Android自定义弹框样式

MsgDialog package cn.mvp.weight; import android.app.Dialog; import

朴灿烈づ我的快乐病毒、/ 2023年10月04日 14:26/ 0 赞/ 45 阅读

相关 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 赞/ 81 阅读

相关 python+selenium之执行js脚本触发一个alert弹出框以及关闭alert弹框

[https://www.cnblogs.com/mengyu/p/6952774.html][https_www.cnblogs.com_mengyu_p_6952774.h

逃离我推掉我的手/ 2023年07月25日 14:25/ 0 赞/ 27 阅读

相关弹出框Alert类

导入 from selenium.webdriver.common.alert import Alert 弹出框类型 1. Alert警告框 2. Confi

缺乏、安全感/ 2023年02月17日 02:21/ 0 赞/ 28 阅读

相关 Element MessageBox 弹框 $alert的使用

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

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

相关封装alert弹窗样式

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

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

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

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

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

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

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

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

相关 layui layer弹出框alert,confim

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

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

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

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

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