1
내 현재 환경에서 플러그인을 만들 수 없으므로 페이지 동작을 javascript: 책갈피로 수정하려고합니다.showModal을 사용하여 약속 된대로 콘텐츠를 완전히 차단하는 방법?
일종의 글로벌 캡처가 포함 된 일부 페이지의 예상 된 입력 키를 제외한 거의 모든 것이 잘 작동합니다. 이런 일이 발생하는 것입니다 :
(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>나는이 DOM을 변경하고 form에 body에서 onkeypress를 이동할 수 있다면, 문제가 해결. 하지만 캡쳐 이벤트가 어디에서 수정하려고하는지 알지조차 모릅니다.
alert, confirm 및/또는 prompt 이외의 방법을 사용하면이 문제를 해결할 수있는 일반적인 방법이 있습니까? 한 시간 동안 나는 using promises or yield이 도움이 될 것이라고 생각했지만, 그렇지 않았습니다.
나는 다른 많은 문제를 해결하기 때문에 계속 (또는 단순함과 작은 코드를 포함하여 모든 기능이있는 항목)을 사용하고 싶습니다.
HTMLDialogElement 인터페이스의 showModal() 메소드는있을 수있는 다른 대화 상자의 맨 위에, 모달로 대화 상자를 표시합니다
the docs이 약속 않습니다. :: backdrop 의사 요소와 함께 최상위 계층에 표시됩니다. 대화 상자 외부의 상호 작용이 차단되고 외부 대화 내용이 비활성 상태가됩니다.
하지만 지금은 그렇지 않습니다.