Tailwind | モーダルダイアログの実装方法

本記事では、Tailwind でモーダルダイアログの実装方法をについて解説しています。

サンプルプログラム

<div id="modal" className="target:block">
    <div className="block w-full h-full bg-gray-100 absolute left-0">
    <a href="#" className="block w-full h-full cursor-default"></a>
        <div className="w-4/5 mx-auto mt-10 relative -top-full">
			<h2　className={`${H2_BASE_STYLE}`}>設定選択</h2>
			<div onClick={() => handleCloseClick()} className={`${GRAY_BUTTON_STYLE + ' w-full col-span-6'}`}>
				閉じる
			</div>
			<table>
				<tr>
					<th className="border border-slate-300">id</th>
					<th className="border border-slate-300">工場</th>
					<th className="border border-slate-300">ライン番号</th>
				</tr>
				{
					settings && 
					settings.map((p) => {
						return (
							<tr className="border border-slate-300 hover:bg-slate-400" key={p.id} onClick={() => handleSelectClick(p)}>
								<td>{p.id}</td>
								<td>{p.factory.name}</td>
								<td>{p.line_no}</td>
							</tr>
						)
					})
				}
			</table>
		</div>
    </div>
</div>