搜尋

首頁  >  問答  >  主體

最近 chrome 更新後,Bootstrap 模態背景顯示在模態前面

Chrome 版本:版本 111.0.5563.64(官方版本)(x86_64) 引導程式:4.3.1

最近的 chrome 更新使模態背景顯示在模態本身的前面。 我查了一下不是z-index的問題,不知道是什麼原因造成的。

1

2

3

4

5

6

7

8

9

.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1040;

    width: 100vw;

    height: 100vh;

    background-color: #000;

}

1

2

3

4

5

6

7

8

9

10

11

12

.modal {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1050;

    display: block;

    width: 100%;

    height: 100%;

    overflow-x: hidden;

    overflow-y: auto;

    outline: 0;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<div class="modal fade" id="aboutUs" tabindex="-1" role="dialog" aria-labelledby="aboutUsModalLabel"

        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">{{ property.othersPopupTitle | translate: langPreference }}</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    <div class="row">

                        <a (click)="tncOnClick()" class="select-wrapper">

                            <label>{{ property.tnc | translate: langPreference }}</label>

                        </a>

                         

                        <a class="select-wrapper" href="{{'tel:'+ contactUs}}" *ngIf="isMobileDevice">

                            <div class="select-icon"></div>

                            <label>{{ property.contactUs | translate: langPreference }}</label>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>


#
P粉512363233P粉512363233378 天前627

全部回覆(2)我來回復

  • P粉478188786

    P粉4781887862024-01-08 12:37:14

    注意 Chrome 擴充功能。我發現“結構化資料的架構生成器”將此規則添加為注入樣式表

    1

    2

    3

    .modal-backdrop {

        z-index: 2147483647 !important;

    }

    嘗試一一禁用它們。

    回覆
    0
  • P粉475315142

    P粉4753151422024-01-08 11:17:58

    不要降級 bootstrap。
    只需將背景加入到.modal 中,並將.modal-backdrop 在主樣式檔案(style.css) 中顯示為無.
    不要忘記在angular.json 中的引導檔案之後呼叫主style.css 檔案。

    1

    2

    3

    4

    5

    6

    .modal {

      background: rgba(0, 0, 0, 0.5);

    }

    .modal-backdrop {

      display: none;

    }

    回覆
    0
  • 取消回覆