Modal windowで文字の色を指定しても変わらないですが．．．

textareaに書いた内容をmodal windowで表示したいと思います。
ビューボタンを押したときに、最初の入力画面の上に一つ画面（入力画面にアクセスできないように）をおいて、さらにその上にローカルストレージから読み込んだ文字を表示したいと思います。
うまくいかない部分は、いちばん上に表示される画面の文字色が透明がかかっていることです。
透明がかからないようにする方法がありますでしょうか？　
真ん中の画面の設定にopacityを入れていますが、こちらが影響していると思いますが、解決策がわからないので、教えてください。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Modal window</title>
8
9<!-- スタイルシート -->
10  <style>
11    .text {
12      margin: 10px;
13    }
14    textarea {
15      display: block;
16      margin: 10px 0px 10px 0;
17    }
18    #modal-container {
19      position: fixed;
20      left: 0px;
21      top: 0px;
22      z-index: 10;
23      width: 100%;
24      height: 100%;
25      opacity: 0.5;
26      visibility: hidden;
27      transition: .6s;
28      background-color: rosybrown;
29    }
30    #modal {
31      position: relative;
32      top: 250px;
33      left: 250px;
34      z-index: 100;
35      color: rgb(0, 10, 5);
36      background-color: red;
37      opacity: 1.0;
38      width: 300px;
39      height: 300px;
40      border: 3px solid #000000;
41      text-align: center;
42    }
43  </style>
44</head>
45
46<body>
47  <!-- 確認事項：ビューボタンを押したときに、テキストをModal画面で表示 -->
48  <div class="text">
49    <textarea id="textArea">これはテストです。</textarea>
50    <button onclick ="modal()" id="view-btn">ビュー</button> 
51  </div>
52
53  <div id="modal-container">
54    <div id="modal">
55      <!-- ビュー表示 -->
56    </div>
57  </div>
58
59  <!-- Javascript -->
60  <script>
61
62    let textArea = document.querySelector('#textArea')
63    
64    let note = JSON.stringify(textArea.value);
65    localStorage.setItem('key', note);
66
67    function modal() {
68      document.querySelector('#modal').innerHTML = JSON.parse(localStorage.getItem('key'));
69      document.querySelector('#modal-container').style.visibility = 'visible'
70    }   
71
72  </script>
73</body>
74</html>

m.ts10806

2021/08/10 04:56

現状だとモーダルの中になんのテキストもなく、また文字色の指定もされていないようですが

kinsncn

2021/08/10 05:16 編集

ありがとうございます。モーダルの中は、ローカルストレージから読み込んだデータが入っていると思いますが、違いますか？また文字色については、css_#modal_color:rgb(0, 10, 5); にしていますが、この設定がおかしいでしょうか？再度、ご確認いただけると助かります。

yambejp

2021/08/10 05:19

jsには現在モーダルという考え方はありませんが（以前はあった）、なにかライブラリを利用する選択肢はありますか？

kinsncn

2021/08/10 05:28 編集

ありがとうございます。　正直、私もモーダルについては詳しくないですが、やりたいことはボタンを押したときに、最初の入力画面の上に一つ画面（入力画面にアクセスできないように）をおいて、さらにその上にローカルストレージから読み込んだ文字を表示したいと思います。うまくいかない部分は、いちばん上に表示される画面の文字色が透明がかかっていることです。透明にしない方法がありますでしょうか？　真ん中の画面の設定にopacityを入れています。

Lhankor_Mhy

2021/08/10 05:28

ご提示のコードを試してみましたが、「文字の色を指定しても変わらない」という問題が再現しませんでした。ご提示いただいていない部分に原因があると思われます。問題が再現するコードをご提示ください。

kinsncn

2021/08/10 05:31

ありがとうございます。opacity：0.1だからよく見えなかった思います。　opacity:0.5にしました。再度ご確認をお願いいたします。

m.ts10806

2021/08/10 05:34

>モーダルの中は、ローカルストレージから読み込んだデータが入っていると思いますが、違いますか？赤の他人にコードから仕様を把握しろというのは横暴なので、操作手順含めて仕様を記載してください。また、ボタン押したときの情報を得なくても良い仕様なのですか？

kinsncn

2021/08/10 05:41

ありがとうございます。やりたいことは以下通りです。ビューボタンを押したときに、最初の入力画面の上に一つ画面（入力画面にアクセスできないように）をおいて、さらにその上にローカルストレージから読み込んだ文字を表示したいと思います。うまくいかない部分は、いちばん上に表示される画面の文字色が透明がかかっていることです。透明にしない方法がありますでしょうか？　真ん中の画面の設定にopacityを入れています。

Lhankor_Mhy

2021/08/10 05:45

質問の編集を拝読。繰り返しになりますが、「文字の色を指定しても変わらない」という問題が再現しませんでした。ご提示のコード**だけ**で問題が再現することを、ご質問者の環境で確認してから質問をしてください。

Lhankor_Mhy

2021/08/10 05:47

質問の編集を拝読。つまり、「文字の色を指定しても変わらない」という問題ではなくて、「文字色に透過がかかることを回避したい」というご質問なのですね？把握しました。

kinsncn

2021/08/10 05:50

ありがとうございます。私の言い方が間違いました、問題は文字の色ではなく、文字に透明がかかている部分をとりたいです。文字がはっきり見えるようにですね。これで、大丈夫でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

opacityは子要素に影響するので、親子関係を変えなくてはいけないです。

この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。

opacity - CSS: カスケーディングスタイルシート | MDN

css
1        #modal-container {
2            visibility: hidden;
3        }
4
5        #modal-container .modal-background {
6            position: fixed;
7            left: 0px;
8            top: 0px;
9            z-index: 10;
10            width: 100%;
11            height: 100%;
12            opacity: 0.5;
13            transition: .6s;
14            background-color: rosybrown;
15        }
16

html
1    <div id="modal-container">
2        <div class="modal-background"></div>
3        <div id="modal">
4            <!-- ビュー表示 -->
5        </div>
6    </div>