¿Cómo usar showModal para bloquear completamente el contenido externo como se prometió?

Question

Apr 03, 2017, 01:52 PM

¿Cómo usar showModal para bloquear completamente el contenido externo como se prometió?

Estoy tratando de modificar el comportamiento de una página con unjavascript: marcador, ya que no puedo hacer complementos (o casi cualquier otra cosa) en mi entorno actual.

casi todo funciona bien, excepto la tecla enter esperada en algunas páginas, que contienen algún tipo de captura global para ello. algo como esto es lo que sucede:

(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>

si pudiera cambiar este DOM y mover elonkeypress desde elbody en elform, problema resuelto. pero ni siquiera sé dónde está el evento enter capture en la página que intento modificar.

aparte de usaralert, confirm y / oprompt, ¿hay un enfoque genérico para resolver esto? durante una hora allí penséusando promesas o rendimiento podría ayudar, pero no fue así.

Quiero seguir usando (o algo con al menos todas las características, incluida la simplicidad y el código pequeño), ya que resuelve muchos otros problemas para mí.

los documentos promete esto:

El método showModal () de la interfaz HTMLDialogElement muestra el cuadro de diálogo como modal, encima de cualquier otro cuadro de diálogo que pueda estar presente. Se muestra en la capa superior, junto con un pseudo-elemento :: telón de fondo. La interacción fuera del diálogo se bloquea y el contenido fuera del mismo se vuelve inerte.

pero eso no es del todo cierto ahora, ¿verdad?