modal - popup javascript ejemplo
¿Cómo usar ShowModal para bloquear completamente el contenido fuera de lo prometido? (1)
¡finalmente! esto funcionó.
primero pensé "intentemos anular la onkeypress ", pero mientras estaba funcionando en esta instancia singular, no estaba en mi entorno. entonces eventualmente pensé "oh, tal vez esté en la llave". y así fue. :)
entonces, al final, la declaración no es completamente falsa. simplemente no impide que otros eventos se propaguen, probablemente por diseño, ya que hay recursos para hacerlo si es necesario. (a saber, en este caso, stopPropagation ).
(function(){
window.overrideEnter = overrideEnter
function overrideEnter (event) {
if (event.keyCode == 13) {
event.stopPropagation()
}
}
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" 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>
<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.event
if (event.keyCode == 13) {
event.stopPropagation()
}
}
if (value !== undefined) {
alertDialog.showModal() // prompt
} else {
input.remove()
input = undefined
if (title.substr(-1) === ''?'') {
alertDialog.showModal() // confirm
} else {
cancelButton.remove()
alertDialog.showModal() // alert
}
}
return null
}
}())
<body onkeypress="handle(event)">
<form action="#">
<input type="text" name="txt" />
<a href="javascript:window.dialog(''foo?'', result => console.log(result))">modal</a>
</form>
<script>
function handle(e){
if(e.keyCode === 13){
e.preventDefault()
alert("Enter was pressed was pressed")
}
return true
}
</script>
</body>
Estoy tratando de modificar el comportamiento de una página con un javascript: marcador, ya que no puedo hacer complementos (o casi cualquier otra cosa) en mi entorno actual.
casi todo funciona bien, excepto la tecla de entrada esperada en algunas páginas, que contiene algún tipo de captura global para ella. algo así 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>
<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 la onkeypress del body al form , problema resuelto. pero ni siquiera sé dónde está el evento de captura de entrada en la página que intento modificar.
aparte de usar alert , confirm y / o prompt , ¿hay un enfoque genérico para resolver esto? durante una hora allí pensé que usar 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 prometen esto:
El método showModal () de la interfaz HTMLDialogElement muestra el diálogo como un modal, encima de cualquier otro diálogo que pueda estar presente. Se muestra en la capa superior, junto con un pseudo-elemento :: backdrop. La interacción fuera del diálogo se bloquea y el contenido que está fuera se vuelve inerte.
pero eso no es del todo cierto ahora, ¿verdad?