HTMLとCSSのみで作成。JavaScriptは未使用。
モーダルを開く
<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/modal/modal.css">
<a href="#modal">
モーダルを開く
</a>
<div id="modal" data-modal>
<div id="dialog" data-modal-dialog role="dialog" aria-modal="true" aria-labelledby="dialog-title" tabindex="-1">
<h3 id="dialog-title">モーダルのタイトル</h3>
<p>ここにテキストや画像などを入れることができます。</p>
<a href="#" data-modal-close>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</a>
</div>
<a href="#" data-modal-overlay></a>
</div>