如何更改警告框的样式？

Question

如何更改警告框的样式？

161

我需要更改 警告框 中 "确定" 按钮的样式。

<head>
    <script type="text/javascript">
        function show_alert() {
            alert("Hello! I am an alert box!");
        }
    </script>
</head>
<body>
    <input type="button" onclick="show_alert()" value="Show alert box" />
</body>

- Jay

7

请不要使用警告框(alert boxes)，有更好的选项。仅将其用于调试(debugging)。 - Ed Heal

29

笑死，EdHeal，请不要用那些来进行调试！哈哈，有更好的选择哈哈。 - EricG

1

我从一个无聊的东西开始，xD http://codepen.io/anon/pen/tFhKu - EricG

10

因为接受jQuery作为“答案”，被点踩了。正确的答案是主张在CSS规范中尝试标准化某个东西。 - John

你可以使用纯JS创建一个警告框。https://dev59.com/AWox5IYBdhLWcg3wOyD9#30498126 - Keval Bhatt

4

令人失望的是，像这样的问题最终会吸引一堆平庸第三方软件包的广告。我不得不筛选出半打这样的“答案”，最终才确定这是不可能的。 - Emperor Eto

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xia xiongjun · Answer 1

我认为你不能更改浏览器默认警告框的样式。

你需要创建自己的警告框或使用一个简单且可定制的库，比如xdialog。以下是自定义警告框的示例。更多演示可以在这里找到。

function show_alert() {
    xdialog.alert("Hello! I am an alert box!");
}

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.css"/>
    <script src="https://cdn.jsdelivr.net/gh/xxjapp/xdialog@3/xdialog.min.js"></script>
    
    <style>
        .xd-content .xd-body .xd-body-inner {
            max-height: unset;
        }
        .xd-content .xd-body p {
            color: #f0f;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
        }
        .xd-content .xd-button.xd-ok {
            background: #734caf;
        }
    </style>
</head>
<body>
    <input type="button" onclick="show_alert()" value="Show alert box" />
</body>

- Visal · Answer 2

I use AlertifyJS to style my dialogues.

alertify.alert('Ready!');
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function(){
    var iframe;
    return {
        // dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
        main:function(videoId){
            //set the videoId setting and return current instance for chaining.
            return this.set({ 
                'videoId': videoId
            });
        },
        // we only want to override two options (padding and overflow).
        setup:function(){
            return {
                options:{
                    //disable both padding and overflow control.
                    padding : !1,
                    overflow: !1,
                }
            };
        },
        // This will be called once the DOM is ready and will never be invoked again.
        // Here we create the iframe to embed the video.
        build:function(){           
            // create the iframe element
            iframe = document.createElement('iframe');
            iframe.frameBorder = "no";
            iframe.width = "100%";
            iframe.height = "100%";
            // add it to the dialog
            this.elements.content.appendChild(iframe);

            //give the dialog initial height (half the screen height).
            this.elements.body.style.minHeight = screen.height * .5 + 'px';
        },
        // dialog custom settings
        settings:{
            videoId:undefined
        },
        // listen and respond to changes in dialog settings.
        settingUpdated:function(key, oldValue, newValue){
            switch(key){
               case 'videoId':
                    iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
                break;   
            }
        },
        // listen to internal dialog events.
        hooks:{
            // triggered when the dialog is closed, this is seperate from user defined onclose
            onclose: function(){
                iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
            },
            // triggered when a dialog option gets update.
            // warning! this will not be triggered for settings updates.
            onupdate: function(option,oldValue, newValue){
                switch(option){
                    case 'resizable':
                        if(newValue){
                            this.elements.content.removeAttribute('style');
                            iframe && iframe.removeAttribute('style');
                        }else{
                            this.elements.content.style.minHeight = 'inherit';
                            iframe && (iframe.style.minHeight = 'inherit');
                        }
                    break;    
                }    
            }
        }
    };
});
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set({frameless:true});

<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.rtl.min.css"/>

- Secoe · Answer 3

无法为alert()框设置样式。您可以使用JavaScript模态覆盖窗口。