できること
JavaScriptなしで、HTMLとCSSのみを使用してダイアログ表示を行います。
動画のようにボタンをクリックすると、ダイアログが表示されます。
読んで欲しい文章を表示させることができます。
※ダイアログとは「ダイアログボックス」のことをいいます。何かを入力させたりメッセージを確認させるために、操作の過程で一時的に開かれる小さい画面のことです。
HTML
index.html
<dialogid="dialog"class="dialog_style">「ダイアログの中身の文章（任意）」
<buttonclass="form__btn"onclick="document.getElementById('dialog').close();">「ダイアログの中身にあるボタンの文章（任意）」
</button></dialog><buttonclass="form__btn"onclick="document.getElementById('dialog').show();">「クリックするとダイアログが表示されるボタンの文章（任意）」
</button>CSS
styles.css
.dialog_style{margin-left:300px;width:1000px;height:500px;border:5pxsolid#b84c00;border-radius:10px;}.form__btn{〜省略〜}.form__btn:hover{〜省略〜}CSSはお好みで記述してください。
以上です。