How to change the style of alert box?

后端 未结 13 1975
一生所求
一生所求 2020-11-22 01:49

I need to change the style of the \"OK\" Button in an alert box.

13条回答
  •  梦谈多话
    2020-11-22 02:32

    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});
    
    
    
    
    
    
    
    

提交回复
热议问题