HTMLとCSSのみでダイアログ表示
できること
JavaScriptなしで、HTMLとCSSのみを使用してダイアログ表示を行います。
動画のようにボタンをクリックすると、ダイアログが表示されます。
読んで欲しい文章を表示させることができます。
※ダイアログとは「ダイアログボックス」のことをいいます。何かを入力させたりメッセージを確認させるために、操作の過程で一時的に開かれる小さい画面のことです。
HTML
index.html
<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
.dialog_style{
margin-left: 300px;
width: 1000px;
height: 500px;
border: 5px solid #b84c00;
border-radius: 10px;
}
.form__btn{
〜省略〜
}
.form__btn:hover {
〜省略〜
}
index.html
<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>
styles.css
.dialog_style{
margin-left: 300px;
width: 1000px;
height: 500px;
border: 5px solid #b84c00;
border-radius: 10px;
}
.form__btn{
〜省略〜
}
.form__btn:hover {
〜省略〜
}
CSSはお好みで記述してください。
以上です。
Author And Source
この問題について(HTMLとCSSのみでダイアログ表示), 我々は、より多くの情報をここで見つけました https://qiita.com/narimiya/items/d4d7cbcfb3d01d8da49c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .