como usar showModal para bloquear completamente o conteúdo externo como prometido?

Question

Apr 03, 2017, 01:52 PM

como usar showModal para bloquear completamente o conteúdo externo como prometido?

Estou tentando modificar o comportamento de uma página com umjavascript: favorito, pois não consigo criar plug-ins (ou quase qualquer outra coisa) no meu ambiente atual.

quase tudo está funcionando bem, exceto a tecla enter esperada em algumas páginas, que contêm algum tipo de captura global para ela. algo assim é o que acontece:

(function(){
    window.dialog = dialog
    function dialog (title, callback, value) {
        let alertDialog = document.getElementById('alertDialog')
        if (alertDialog) alertDialog.remove()
        let htmlDiv = document.createElement('div')
        let html = `<div>dummy</div>
        <dialog id="alertDialog">
          <form method="dialog">
            <section>
              <p>
                <label for="value">${title}</label>
                <br />
                <input type="text" name="value" value="${value}">
              </p>
            </section>
            <menu>
              <button id="cancel" type="reset">cancel</button>
              &nbsp;
              <button type="submit">ok</button>
            </menu>
          </form>
        </dialog>
        <style>dialog#alertDialog input { width: 100%; } dialog#alertDialog menu { text-align: center; }</style>`
        htmlDiv.innerHTML = html.replace(/^\s*</gm,'<').replace(/[\n\r\t\0\f\v]/g,'') // "minify" else append child fails, although...
            .replace('> <', '><') // ...after jscompress minifies this and we paste into bookmark, it adds those spaces which would yield to append child error
        alertDialog = htmlDiv.childNodes[1]
        document.querySelector('body').appendChild(alertDialog)
        let cancelButton = alertDialog.querySelector('#cancel')
        if (cancelButton) cancelButton.addEventListener('click', function() { alertDialog.close() })
        let input = alertDialog.querySelector('input')
        if (typeof callback === 'function') {
            alertDialog.onsubmit = function(){ callback(input ? input.value : true) }
            alertDialog.oncancel = function(){ callback(false) }
        }

        if (value !== undefined) {
            alertDialog.showModal() // prompt
        } else {
            alertDialog.querySelector('input').remove()
            if (title.substr(-1) === '?') {
                alertDialog.showModal() // confirm
            } else {
                alertDialog.querySelector('#cancel').remove()
                alertDialog.showModal() // alert
            }
        }
        return null
    }

//    dialog('foo!')
}())

<body onkeypress="handle(event)">
<form action="#">
    <input type="text" name="txt" />
    <a href="javascript:window.dialog('foo!')">modal</a>
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that rusn
            alert("Enter was pressed was presses");
        }
    }
</script>
</body>

se eu pudesse mudar esse DOM e mover oonkeypress debody noform, problema resolvido. mas nem sei onde está o evento enter capture na página que estou tentando modificar.

diferente de usaralert, confirm e / ouprompt, existe uma abordagem genérica para resolver isso? por uma hora eu penseiusando promessas ou rendimentos pode ajudar, mas não ajudou.

Eu quero continuar usando (ou algo com pelo menos todos os recursos, incluindo simplicidade e código pequeno), pois resolve muitos outros problemas para mim.

os documentos prometa o seguinte:

O método showModal () da interface HTMLDialogElement exibe a caixa de diálogo como modal, por cima de qualquer outra caixa de diálogo que possa estar presente. Ele é exibido na camada superior, junto com um pseudo-elemento :: backdrop. A interação fora da caixa de diálogo é bloqueada e o conteúdo externo é tornado inerte.

mas isso não é inteiramente verdade agora, é?