ｊｓぽっぷあっぷ?

解決済

質問者：9うい9p
質問日時：2021/10/16 17:17
回答数：3件

おそらくｊｓの技術だと思います。
１，ポップアップというのでしょうか？
2，棚に入れるというボタンをクリックしたらそのうえ？に「見終わった」「見たい」などのボタンが表示されます。下記の画像ようなプログラムはどうすれば作れますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： sukitaro
回答日時：2021/10/16 18:03

cssで、position:fixed;にしたdiv要素を、

jsで、display:none;のクラスを付けたり消したりするのだと思います。

たぶん、以下でうまくいくと思いますが、
ブラウザによっては使えないかもしれません。
クロームでは表示されました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>popup</title>
<style>
body{
position:relative;
}
.pop-ups{
position:fixed;
z-index: 10;
top:0;
left:0;
margin:0;
padding:0;
}
.display-none{
display:none;
}
.black{
width:100vw;
height:100vh;
background-color:rgb(0,0,0,.5); /*半透明*/
}
.pop-up{
display:inline-block;
width:100px;
height:100px;
margin:10px;
padding:10px;
border:1px solid blue;
border-radius:50%;
background-color:aqua;
text-align:center;
}
</style>
</head>
<body>
<h1>title</h1>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<a href="#" id="btn">棚に入れる</a>
<div id="pop-ups" class="pop-ups display-none">
<div id="black" class="black">
<a href="#" class="pop-up">見たい</a>
<a href="#" class="pop-up">見てる</a>
<a href="#" class="pop-up">見終わった</a>
</div>
</div>
<script>
let btn = document.getElementById('btn');
let popUps = document.getElementById('pop-ups');
let black = document.getElementById('black');

btn.addEventListener('click',function(){
popUps.classList.remove('display-none');
},false);
black.addEventListener('click',function(){
popUps.classList.add('display-none');
},false);
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

通報する

お礼日時：2021/10/16 18:25

参考程度に

No.2

回答者： fujillin
回答日時：2021/10/16 18:02

こんにちは

＞下記の画像ようなプログラムはどうすれば作れますか？
いろいろな方法があると思います。

一例として、
・背景を半透明にした画面サイズのboxの上にボタン群を置いたものをposition:absoluteで用意しておく（レイヤー的なもの）
・初期値としては、display:none
・「棚に入れる」ボタンをクリックしたら、display:blockなどにする。
といった方法であれば、実際の処理としては、要素のstyleを変更するか、あるいは、クラス名を付すだけですむと考えられます。

場合によっては、スクリプトを用いずにCSSだけでも実現は可能でしょう。
CSSでの実施例（純粋な CSS のライトボックス）
https://developer.mozilla.org/ja/docs/Web/CSS/:t …