<dialog>
使用例
dialog.html<dialog id="favDialog">
<form method="dialog">
<p><label>Favorite animal:
<select>
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</label></p>
<menu>
<button value="cancel">Cancel</button>
<button id="confirmBtn" value="default">Confirm</button>
</menu>
</form>
</dialog>
script.js// dialog windwを作成する
async function makeDialog() {
const html = await fetch('/api/code/takker/<dialog>/dialog.html').then(res => res.text());
const div = document.createElement('div');
div.innerHTML = html;
document.body.appendChild(div);
return document.getElementById('favDialog');
}
function showDialog() {
const dialog = document.getElementById('favDialog') ?? makeDialog();
dialog.showModal();
}
scrapbox.PageMenu.addMenu({
title: 'show dialog',
image: '/assets/img/logo.png',
onClick: showDialog
});
Reference
<body> をscrollさせない
css/** dialogが開いているときは、overlayの下がスクロールされないようにする*/
body:has(dialog[open]) {
overflow: hidden;
}
記事だとJSで制御している
要素は適宜、scrollが発生しているものに置き換えること
scrapboxの場合、 <html> に当てないと効果がなかった