Unfortunately, the documentation of dialog options and overall dialogs is well…abysmal to be candid . We are working on updating the dialog documentation, it shall take some time but it shall be done. Here’s how you can try out a dialog that resizes upon clicking a button in it.
<!DOCTYPE HTML>
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<button id="show-dialog">Show dialog 3</button>
</body>
</body>
</html>
and in main.js
:
document.getElementById("show-dialog").addEventListener("click", (e) => {
const dialog = document.createElement("dialog");
document.appendChild(dialog);
const resizeButton = document.createElement("button");
resizeButton.innerText = "Click to resize";
resizeButton.addEventListener("click", (e) => {
// random size on every click
dialog.resizeTo(
Math.floor(Math.random() * 50) + 500,
Math.floor(Math.random() * 50) + 500
);
});
dialog.appendChild(resizeButton);
dialog.show({
"size": {
"width": 300,
"height": 500
}
});
});