How To Use Showmodal To Completely Block Content Outside As Promised?

I'm trying to modify a page behaviour with a javascript: bookmark, as I can't make plugins (or almost anything else) in my current environment. almost everything is working fine, e

Solution 1:

finally! this worked.

first I figured "let's just try to override the onkeypress", but while it was working in this singular instance, it wasn't in my environment. then eventually I figured "oh, maybe it's on the keydown". and so it was. :)

so, in the end, the statement isn't entirely false. it's just not preventing other events from propagating, probably per design, as there are resources to do it if you need to. (namely, in this case, stopPropagation).

(function(){
    window.overrideEnter = overrideEnter
    functionoverrideEnter (event) {
        if (event.keyCode == 13) {
            event.stopPropagation()
        }
    }
    window.dialog = dialog
    functiondialog (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" onkeypress="return window.overrideEnter(event)" onkeydown="return window.overrideEnter(event)" onkeyup="return window.overrideEnter(event)">
            <section>
              <p>
                <label for="value">${title}</label>
                <br />
                <input type="text" name="value" value="${value}">
              </p>
            </section>
            <menu>
              <button type="submit">ok</button>
              &nbsp;
              <button id="cancel" type="reset">cancel</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')
        cancelButton.addEventListener('click', function(){ alertDialog.close(); callback(false) })
        let input = alertDialog.querySelector('input')
        //console.log(input)if (typeof callback === 'function') {
            alertDialog.onsubmit = function(){ callback(input ? input.value : true) }
            alertDialog.oncancel = function(){ callback(false) }
            alertDialog.onclose = function(){}
        }

        document.onkeydown = function(event) {
            event = event || window.eventif (event.keyCode == 13) {
                event.stopPropagation()
            }
        }
        if (value !== undefined) {
            alertDialog.showModal() // prompt
        } else {
            input.remove()
            input = undefinedif (title.substr(-1) === '?') {
                alertDialog.showModal() // confirm
            } else {
                cancelButton.remove()
                alertDialog.showModal() // alert
            }
        }
        returnnull
    }
}())

<bodyonkeypress="handle(event)"><formaction="#"><inputtype="text"name="txt" /><ahref="javascript:window.dialog('foo?', result => console.log(result))">modal</a></form><script>functionhandle(e){
        if(e.keyCode === 13){
            e.preventDefault()
            alert("Enter was pressed was pressed")
        }
        returntrue
    }
</script></body>