Modify an HTML element or a browser native function

Question

Guys, next... Google Core supports the element <dialog> and its functions showModal() and close(). However, some browsers do not support it. I made a simple script, which checks whether the browser is different from google Chrome, and if so, it replaces the tags <dialog> by div’s, with ids, classes etc. The question is: There are some ways to replace/re-enter functions showModal() and close() to perform my function? Instead of the native one? I tried with HTMLElement.prototype.showModal and nothing!

Answer 1

If you’re looking to replace the function only in Google Chrome and the possible browsers that support this implementation is exactly as you wrote it, with a minor fix. Is not HTMLElement, but yes HTMLDialogElement. Soon...

if (window.HTMLDialogElement) {

    HTMLDialogElement.prototype.showModalOriginal = HTMLDialogElement.prototype.showModal;

    HTMLDialogElement.prototype.showModal = function() {
        //Sua implementação aqui...
        alert('Substituição de showModal()');

        //Se quiser chamar a função nativa original...
        if (this.showModalOriginal instanceof Function) this.showModalOriginal();
    }

    HTMLDialogElement.prototype.closeOriginal = HTMLDialogElement.prototype.close;

    HTMLDialogElement.prototype.close= function() {
        //Sua implementação aqui...
        alert('Substituição de close()');

        //Se quiser chamar a função nativa original...
        if (this.closeOriginal instanceof Function) this.closeOriginal();
    }

}

EDITADO1: I wrote the verification for the browser not to implement HTMLDialogElement.

Answer 2

The solution with the help of Sérgio Cabral!!!!

`(Function() {

if (!(/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor))) {
    var dialogs = document.getElementsByTagName('dialog');
    var overlayModal = document.createElement('div');
    var randomId = '_' + Math.random().toString(36).substr(2, 9);
    overlayModal.style.cssText = 'z-index:2147483646 ;position:fixed;top:0;left:0;width:100%;height: 100%;background-color:rgba(0, 0, 0, 0.65);display:none;'
    overlayModal.setAttribute('id', randomId);
    document.body.appendChild(overlayModal);

    for (var x = 0; x < dialogs.length; x++) {
        var elementClass = (dialogs[x].classList.length > 0) ? dialogs[x].className.split(' ') : null;
        var elementID = (dialogs[x].id.length  > 0) ? dialogs[x].id : null;
        var insideContent = dialogs[x].innerHTML;  
        var newElement = document.createElement('div');
        if (elementClass) newElement.classList = elementClass.join(' ');
        if (elementID) newElement.setAttribute('id', elementID);
        newElement.innerHTML += insideContent;
        newElement.style.cssText = 'display:none;position:fixed;z-index:2147483647;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:-webkit-fit-content;height:-webkit-fit-content;color:black;margin:auto;border-width:initial;border-style:solid;border-color:initial;-webkit-border-image:initial;-o-border-image:initial;border-image:initial;padding:1em;background:white;';
        document.body.appendChild(newElement);            
    }

    Array.prototype.slice.call(dialogs).forEach(function (item) {
        item.parentNode.removeChild(item);
    });

    HTMLElement.prototype.showModal = function() {
        document.getElementById(randomId).style.display = 'block';
        this.style.display = 'block';
    }

    HTMLElement.prototype.close = function() {            
        document.getElementById(randomId).style.display = 'none';
        this.style.display = 'none';
    }
}

}());`