No.3ベストアンサー
- 回答日時:
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>

No.2
- 回答日時:
こんにちは
>下記の画像ようなプログラムはどうすれば作れますか?
いろいろな方法があると思います。
一例として、
・背景を半透明にした画面サイズのboxの上にボタン群を置いたものをposition:absoluteで用意しておく(レイヤー的なもの)
・初期値としては、display:none
・「棚に入れる」ボタンをクリックしたら、display:blockなどにする。
といった方法であれば、実際の処理としては、要素のstyleを変更するか、あるいは、クラス名を付すだけですむと考えられます。
場合によっては、スクリプトを用いずにCSSだけでも実現は可能でしょう。
CSSでの実施例(純粋な CSS のライトボックス)
https://developer.mozilla.org/ja/docs/Web/CSS/:t …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの 4 2022/11/22 10:30
- Visual Basic(VBA) Edge操作のアプリが例外発生に 1 2023/03/12 21:22
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- その他(動画サービス) Tver アンケートに回答しても視聴できない(何度もアンケート画面が開く) 1 2023/01/13 21:47
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptテキストBOX色を元に...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
クリックすると下に説明文が出...
-
リンク色を動的に変更したい。i...
-
ネストされたハッシュの値から...
-
iframe内からjQueryで指定したい
-
JavascriptでDIV~DIVをリロードで
-
プルダウンとチェックボックス...
-
checkboxにチェックを入れると...
-
テキストエリア内の一部の文字...
-
折りたたみ式JavaScriptをcheck...
-
背景色を一定時間ごとにランダ...
-
JSで動的にリンクを作成
-
javascriptでのアコーディオン...
-
複数のリンク画像を一定時間で...
-
ページ遷移後のcssプロパティ保持
-
IFRAMEの表示/非表示を切り替え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
背景色を透明化
-
createElementで作成した要素を...
-
javascriptでpostした値が取得...
-
読み込んだQRコードをフォーム...
-
iframe内のリンクが飛ばないの...
-
jQueryでクリックされた要素のi...
-
ダブルクォーテーションが消え...
-
<div ~ </div> で囲まれたテキ...
-
【HP作成】クリックすると下...
-
<Div>の中の要素の数を調べる
-
jQueryで特定id以外の下にある...
-
VBScript+IEのチェックボック...
-
removeAttribute()メソッドで削...
-
折りたたみ部分にアンカーでリ...
-
onclickを利用した伸縮メニュー...
-
背景色を一定時間ごとにランダ...
おすすめ情報

