bootstrapでのモーダルが動かない

bootstrapにてナビバーを作成し
バーガーメニューを押したらモーダルで全画面表示になるようにしているのですが
モーダルは画面に出てきてもリンクが押せなかったり、閉じるボタンも全く動きません。

何が間違っているのでしょうか？

bootstrap４.５xを使用しました。

html
1          <nav class="navbar navbar-expand-lg navbar-light">       
2            <button class="navbar-toggler" type="button" data-toggle="modal" data-target="#menuModal"
3              aria-label="Toggle navigation">          
4              <span class="navbar-toggler-icon"></span>
5            </button>
6            <div class="collapse navbar-collapse" id="navbarNav">
7              <ul class="navbar-nav">                                          
8                <li class="nav-item">
9                  <a class="nav-link" href="">トップページ</a>
10                </li>
11                <li class="nav-item">
12                  <a class="nav-link" href="">商品</a>
13                </li>
14                <li class="nav-item">
15                  <a class="nav-link" href="">概要</a>
16                </li>
17               
18              </ul>
19            </div>
20          </nav>
21
22・・モーダル・・
23          <div class="modal fade fullscreen" id="menuModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
24            <div class="modal-dialog">
25              <div class="modal-content">
26                <div class="modal-header">
27                 <h5 class="modal-title">Modal title</h5>
28                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
29                   <span aria-hidden="true">×</span>
30                 </button>
31                </div>
32                <div class="modal-body">
33                  <ul style="list-style-type:none;">
34                    <li>
35                      <a href="">トップページ</a>
36                    </li>
37                    <li>
38                      <a href="">商品</a>
39                    </li>
40                    <li>
41                      <a href="">概要</a>
42                    </li>                    
43                  </ul>
44                </div>
45              </div><!-- /.modal-content -->
46            </div><!-- /.modal-dialog -->
47          </div>
48

css
1.fullscreen .modal-dialog {
2  margin: 0 0 0 0;
3  max-width: 100%;
4  width: 100%;
5  height: 100%;
6  min-height: 100%;
7  padding: 0;;
8}
9 
10.fullscreen .modal-content {
11  height: 100%;
12  min-height: 100%;
13  border-radius: 0;
14  background: rgba(36, 36, 36, 0.90);
15  overflow:auto;
16}
17 
18.fullscreen .modal-content .modal-header{
19  border: 0px;
20}
21 
22.fullscreen .modal-content button{
23  opacity: 1;
24}
25 
26.fullscreen .modal-content button span{
27  color: #fff;
28  font-weight: 1;
29  font-size: 26px;
30  text-shadow: none;
31}
32 
33.fullscreen .modal-body .modal-logo img {
34  width: 158px;
35  padding-bottom: 84px;
36}
37 
38.fullscreen .modal-body ul {
39  padding: 0 0 0 0;
40}
41.fullscreen .modal-body li {
42  padding-bottom: 43px;
43}
44.fullscreen .modal-body a {
45  color: #fff;
46  font-size: 16px;
47}
48 
49.fullscreen .modal-body .social img {
50  width: 56px;
51  margin: 8px;
52}
53.modal-title{
54  color: #fff;
55}
56
57.modal-backdrop{
58  position: fixed;
59    top: 0;
60    left: 0;
61    z-index: 1040;
62    width: 100vw;
63    height: 100vh;
64}
65
66.modal-backdrop.show{
67  opacity: 0;
68}
69

m.ts10806

2021/02/23 00:40

Bootstrapのバージョンは幾つでしょうか。マイナーバージョンも含めて提示してください（5の場合はその中でも段階があるので、それも。）

chocon

2021/02/23 00:42

bootstrapv4.5の最新を使用しました。

chocon

2021/02/23 00:42

すみません・正しくは４.５xです。

m.ts10806

2021/02/23 00:46

質問本文に追記してください。あとjQueryはslimではないですよね？

m.ts10806

2021/02/23 00:50

現状提示されてるコードだけでは現象再現しませんね。リンクも閉じるも押せる。提示されてない場所に原因があるのでは？コードはコピペで他者が再現できるように配慮願います。一部だけでは本質が見えないこともあります。コード全体だと多すぎるのでしたら、再現可能なミニマムコードを別途組んでください。

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

回答1件

ベストアンサー

.modal-backdrop (モーダルの外側をクリックしたときに閉じるためのクリック領域) が z-index: 1040 で最前面に全画面いっぱいに表示されているのが原因では無いかと思いました。
モーダルがフルスクリーンになるよう設定されているので、.modal-dialog の z-index を1041以上にするか、.modal-backdrop の指定を見直すかしてみてください。

投稿2021/02/23 00:57