Next, google chrome supports <dialog> and its showModal() and close() functions. However, some browsers do not support it. I made a simple script, which checks if the browser is different from google chrome, and if so, it replaces the <dialog> tags with div's, with ids, classes, and so on. The question is: Is there a way to override / rewrite the showModal() and close() functions for me to perform my function? Instead of the native?
I tried with HTMLElement.prototype.showModal and nothing!
Modify an HTML element or a native browser function
1
asked by anonymous 19.06.2018 / 03:30
2 answers
0
If you're just wanting to override the function in Google Chrome and the possible browsers that support this implementation is just like you wrote, with a minor fix. It is not HTMLElement , but 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();
}
}
EDIT1: I wrote the verification in case the browser does not implement HTMLDialogElement .
19.06.2018 / 04:11
-1
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';
}
}
} ()); '
23.06.2018 / 00:19