怎么修改js alert弹框样式

Posted 2023-05-18

怎么修改js alert弹框样式方法如下：

覆盖window.alert函数，或者直接通过alert的原型来覆盖；

原理：alert 属于window 的函数，每个函数都有原型对象prototype ，只需要修改window.alert的原型对象即可改变原生alert的样子；

代码如下

window.alert.prototype = function(msg)
//some code here ,怎么改都行
alert('消息:'+msg);
;

参考技术A

方法：覆盖window.alert函数，或者直接通过alert的原型来覆盖；

原理：alert 属于window 的函数，每个函数都有原型对象prototype ，只需要修改window.alert的原型对象即可改变原生alert的样子；

代码如下

window.alert.prototype = function(msg)
    //some code here ,怎么改都行
    alert('消息:'+msg);
;

参考技术B 那个改不了。只能覆盖window.alert这个方法。
比如：你先去找个弹出框的插件。（推荐一个：layer）
拿这个layer来举例子：
提示消息的方法是：layer.msg
然后你可以用这个方法来覆盖alert。
window.alert=layer.msg
然后你再是使用alert的时候 就会调用layer.msg了。 参考技术C 不能修改alert弹出框的样式。
这是因为alert调用的是浏览器组件，而不是常规的html组件。目前没有浏览器开放组件修改的接口。
不同的浏览器有着不同的alert弹出框。
要想使用外观好的弹出框，可以使用html书写自己的弹出框。
当然也可以使用开源库，我推荐使用swal开源项目，这个项目在github上面可以找到，引用方式很简单，代用方式也和alert相差无几。 参考技术D alert是javascript内置的函数，样式是写好的，不能修改，可以用document.write，当然也可以用jquery，当然也可以自己修改js的内置，不过那就需要相当厉害了，

前端开发--js弹框

js三种弹框

    一.普通弹框

       这类弹框就是仅仅是个提示作用，并不会做其它操作

      关键词：alert()

   这个没啥好说的，就是一个弹框。

   二.判断弹框

    这类框有一个判断作用

     关键字：confirm()

if(confirm("成绩库定稿后成绩无法再做修改，点击确认将生成最终成绩库，还可能修改，请点击取消"))
             
        {
                // 如果点击确定 ，那就在这里添加相关逻辑
     
            alert("保存成功")
     
         }
        else 
        {
            //如果点击取消，那就再这操作相关逻辑
            alert("已取消")
        }

看这个框效果：

 三.弹框输入能赋值

 关键字：prompt("请输入您的名字","")

var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ，
             
            //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
        
            if(name)//如果返回的有内容
            {
                 alert("你的名字是"+ name)
         
             }

效果：

当然如果你还要需要其它的操作，你可以用jquery

关键字：dialog

$(function(){
    $("#add").click(AddZsmepz);}

//添加招生名额配置
function AddZsmepz(){
        $.dialog({
            id: add,
            fixed: true,
            lock: true,
            width: 600, 
            height: 330,
            cancelVal:"关 闭",
            cancel:true,
            title:\'添加招生名额配置\',
            content: \'url:\'+\'addZsmepz.htm?type=add\' 
            });
}

 效果：

 这里其实是一个新的页面，只是把它放在一个固定大小的弹框里，关于dialog，我这里不多讲，还是比较复杂的，可以单独搜它。

 

 水滴石穿，成功的速度一定要超过父母老去的速度！ 少尉【4】