◆ ダイアログっぽい
◆ ……けど ウェブページ内にあると言うよりも別のウィンドウが上に乗ってるように見える
◆ 向いてないかも?

普段ダイアログは alert 任せなことが多めで自分で作ってもそれほど工夫もしてませんでした
なので見返すとダイアログぽさが足りない気がします

とりあえず参考のために Windows のダイアログっぽいものを作ってみました

WebComponents にしてます

const html = `
<div>
<header class="header">
<h1><slot name="title">Title</slot></h1>
<div class="close">✖</div>
</header>
<div class="body">
<div class="contents">
<slot name="content"></slot>
</div>
<div class="buttons">
<slot name="button"></slot>
</div>
</div>
</div>
`

const css = `
:host {
display: block;
width: 400px;
margin: 20px;
border: 1px solid #888;
border-radius: 8px;
box-shadow: 0 0 10px 0px #333;
background: aliceblue;
}
.header {
margin: 3px 10px;
position: relative;
}
.header .close {
position: absolute;
top: -3px;
right: 0;
background: #ef6161;
color: white;
font-size: 13px;
width: 32px;
height: 16px;
line-height: 16px;
border: 1px solid #0004;
border-top: 1px solid #fff7;
border-radius: 0 0 4px 4px;
text-align: center;
}
.header h1 {
font-size: 13px;
font-weight: normal;
margin: 0;
}
.body {
background: #f0f0f0;
margin: 0 8px 8px;
border: 1px solid #666;
padding: 10px;
}
.body .contents {
font-size: 13px;
}
.body .buttons {
text-align: right;
}
.body .buttons ::slotted(button) {
width: 70px;
}
`

const template = document.createElement("template")
template.innerHTML = html

const cssss = new CSSStyleSheet()
cssss.replaceSync(css)

customElements.define(
"win-dialog",
class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: "open" }).append(template.content.cloneNode(true))
this.shadowRoot.adoptedStyleSheets = [cssss]
}
}
)

使い方はこういう感じです

<!doctype html>

<script type="module">
import "./win-dialog.js"
</script>

<win-dialog>
<span slot="title">Abcd</span>
<span slot="content">content content content<br/>content content</span>
<button slot="button">OK</button>
</win-dialog>

DEMO

この画像の真ん中の 「Abcd」 というタイトルのウィンドウです

win7dialog

他のウィンドウに自然に溶け込んでるように見えますよね
ブラウザの上にウィンドウが重なってるみたいでドラッグして移動したくなります


Windows のダイアログではボタンエリアと本文エリアで色が分かれているものもありますが 今回のは固定です
slot 機能でタイトルと本文とボタンを設定します

アイコン付きにしたいなら本文に img タグを入れれば作れます

あくまでダイアログの見た目だけなので開いたり閉じたりはしません