モーダルが上手く表示されません。。

HTML、SCSSで上手くモーダルが表示されません。

HTML,SCSSでdisplay:none;で隠す前のモーダルを作っているのですが、薄い黒幕は表示できても、その中に肝心のモーダル自体が表示されません。。
ものすごい初歩的な事で申し訳ないのですが、解決できなくて困っています。
どなたかわかる方いればご教授お願いします。

HTML
1 <div class="signup-modal-wrapper">
2        <div class="modal">
3          <div>
4            <i calss="fa fa-2x fa-times"></i>
5          </div>
6          <div class="signup-form">
7            <h2>新規登録</h2>
8            <form action="#">
9              <input class="form-control" type="text" placeholder="メールアドレス">
10              <input class="form-control" type="password" placeholder="パスワード">
11            </form>
12            <div class="submit-btn">新規登録</div>
13          </div>
14        </div>
15      </div>

scss
1 .signup-modal-wrapper{
2            position: fixed;
3            top: 0;
4            right: 0;
5            bottom: 0;
6            left: 0;
7            background-color: rgba(0, 0, 0, 0.6);
8            z-index: 20;
9            
10            .modal{
11                position: absolute;
12                top: 20%;
13                left: 34%;
14                background-color: #e6ecf0;
15                width: 450px;
16                height: auto;
17                padding: 20px 0 40px;
18                border-radius: 10px;
19                text-align: center;
20                .fa-times{
21                    position: absolute;
22                    top: 12px;
23                    right: 12px;
24                    color: rgba(128, 128, 128, 0.46);
25                    cursor: pointer;
26                }
27                .signup-form {
28                    width: 100%;
29                    h2 {
30                        color: #5f5d60;
31                        letter-spacing: 1px;
32                        margin-bottom: 40px;
33                    }
34                    input {
35                        width: 320px;
36                        margin-bottom: 20px;
37                        font-size: 12px;
38                        padding: 12px 12px;
39                        border: 1px solid #d0d5d8;
40                        border-radius: 5px;
41                    }
42                }
43                .submit-btn {
44                    display: inline-block;
45                    padding: 14px 140px;
46                    background-color: #5dca88;
47                    border: none;
48                    border-radius: 3px;
49                    color: white;
50                    margin: 10px auto;
51                    cursor: pointer;
52                }
53            }
54        }

試したこと

・.modalのz-indexを.signup-modal-wrapperより大きくしてみる。

・クラス名にスペルミスがないかのチェック。

kei344

2020/04/04 07:39

提示されているものはCSSではなく、SASSやSCSSでは。

Lhankor_Mhy

2020/04/04 07:45

当方の環境では普通に表示されました。問題が再現しません。

blueee

2020/04/04 07:46

すいません、scssです。ご指摘ありがとうございます！

kei344

2020/04/04 07:47

SCSSなら質問タグ「SASS」は関係ないので削除して置いてください。

Lhankor_Mhy

2020/04/04 07:53

> kei344さん SCSS は Sassなので、Sassタグを使うのは妥当だと思います。

blueee

2020/04/04 07:53

Lhankor_Mhyさんご返答ありがとうございます。それであれば、関係ないかもしれませんがモーダルのコードを書く位置がいけないのでしょうか？自分は、headerとmainの間に書いています。よろしくお願いします。

Lhankor_Mhy

2020/04/04 07:59

サンプルを挙げておきます。 https://jsfiddle.net/Lhankor_Mhy/vn3dphq6/

kei344

2020/04/04 07:59

To: Lhankor_Mhyさん To: blueeeさん「Sass」を「SASS」と勘違いしていました、すみません。

blueee

2020/04/04 08:11

Lhankor_Mhyさんサンプルありがとうございます。コードは問題なさそうなので、コード以外で問題ないか探ってみます。

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

回答1件

こちらで、表示されますか?

CSS
1.signup-modal-wrapper {
2  position: fixed;
3  top: 0;
4  right: 0;
5  bottom: 0;
6  left: 0;
7  background-color: rgba(0, 0, 0, 0.6);
8  z-index: 20;
9}
10.signup-modal-wrapper .modal {
11  position: absolute;
12  top: 20%;
13  left: 34%;
14  background-color: #e6ecf0;
15  width: 450px;
16  height: auto;
17  padding: 20px 0 40px;
18  border-radius: 10px;
19  text-align: center;
20}
21.signup-modal-wrapper .modal .fa-times {
22  position: absolute;
23  top: 12px;
24  right: 12px;
25  color: rgba(128, 128, 128, 0.46);
26  cursor: pointer;
27}
28.signup-modal-wrapper .modal .signup-form {
29  width: 100%;
30}
31.signup-modal-wrapper .modal .signup-form h2 {
32  color: #5f5d60;
33  letter-spacing: 1px;
34  margin-bottom: 40px;
35}
36.signup-modal-wrapper .modal .signup-form input {
37  width: 320px;
38  margin-bottom: 20px;
39  font-size: 12px;
40  padding: 12px 12px;
41  border: 1px solid #d0d5d8;
42  border-radius: 5px;
43}
44.signup-modal-wrapper .modal .submit-btn {
45  display: inline-block;
46  padding: 14px 140px;
47  background-color: #5dca88;
48  border: none;
49  border-radius: 3px;
50  color: white;
51  margin: 10px auto;
52  cursor: pointer;
53}