HTMLとCSSのみでダイアログ表示

できること

JavaScriptなしで、HTMLとCSSのみを使用してダイアログ表示を行います。

動画のようにボタンをクリックすると、ダイアログが表示されます。
読んで欲しい文章を表示させることができます。

※ダイアログとは「ダイアログボックス」のことをいいます。何かを入力させたりメッセージを確認させるために、操作の過程で一時的に開かれる小さい画面のことです。

HTML

index.html

Copied!

 <dialog id="dialog" class="dialog_style" >
                        「ダイアログの中身の文章（任意）」
 　 <button class="form__btn" onclick="document.getElementById('dialog').close();">
                       「ダイアログの中身にあるボタンの文章（任意）」
   </button>
 </dialog>
 
<button class="form__btn" onclick="document.getElementById('dialog').show();">
                    「クリックするとダイアログが表示されるボタンの文章（任意）」
                    </button>

CSS

styles.css

Copied!

.dialog_style{ 
margin-left: 300px;
width: 1000px;
height: 500px;
border: 5px solid #b84c00;
border-radius: 10px;
}

.form__btn{
 〜省略〜
}

.form__btn:hover {
〜省略〜
}

CSSはお好みで記述してください。

以上です。