#はじめに
World Pressでアウトプット用として公開しています。が、小学生の‘感想‘になっています。ご了承ください。
World Press
#私は本当に未経験で実務もないので自分用のメモなどで活用していきたいと思います。間違いなどあるとおもいますので、その際はアドバイスお願いいたします。
↓題名の関連記事↓
↓実践↓
index.html
<button popovertarget="my-popover">
Open Popover </button>
<div id="my-popover" popover>
<p>これだけで表示/非表示が可能。
<br>JavaScriptは不要なのか？<p>
</div>
style.css
body{
background: rgb(242, 250, 228);
display: flex;
justify-content: center;
}
#my-popover{
background: aqua;
color: black;
position: absolute;
top: 300px;
margin: 0 auto;
}
cssが無くても動作を確認できました。なのでHTMLの記述のみで大丈夫。
popovertargetactionを使用して明示的なポップオーバーを実装できる。
以下popovertargetactionのオプション
popovertargetaction="show: ポップオーバーを表示します。
popovertargetaction="hide: ポップオーバーを非表示します。
結果→ポップオーバー内に×ボタンが追加されたのを確認。
この状態ではページ内において他の箇所を適当にクリックすると勝手に消えてしまう。
popover="manual" 手動ポップオーバーを使う。
この記述により
- 他のポップオーバーを閉じない。
- ライトディスミス不可能。トグルやクローズアクションで閉じる。
上記記述により解決。
さらにスタイリング機能もある。::backdrop詳細は記事を参照。
記事内ではまだ、私には難易度が高く、自分なりに簡単に実装してみました。
###完成
index.html
<body>
<button popovertarget="my-popover">
Open Popover </button>
<div id="my-popover" popover="manual">
<button class="close-btn"
popovertarget="my-popover" popovertargetaction="hide">
<span aria-hide=”true”>❌</span>
<span class="sr-only">Close</span>
</button>
<p>これだけで表示/非表示が可能。
<br>JavaScriptは不要なのか？
</p>
</div>
<img class="back" src="img/back.jpg" alt="">
</body>
style.css
body{
background: rgba(38, 255, 0, 0.58);
width: 100%;
}
#my-popover::backdrop{
background: rgba(190, 190, 190, 0.5);
color: black;
position: absolute;
}
.back{
max-width: 80%;
display: flex;
justify-content: space-between;
margin: 50px auto;
}
ざっくりと記述したので見づらいと思います。ご了承ください。
↓結果↓
#最後に
ご指摘などあればコメントなどしてくれますと幸いです。