溢位-y滾動在自定義模態上可見但不起作用-有解無憂

我的 angular 應用程式中有一個自定義模式。在正文中，我想布置條款和條件（它會很長），因此我需要模態的正文部分才能滾動。目前的問題是滾動條是可見的，但它的行為就像它被禁用一樣——即使內容肯定會溢位，它也不會移動。

這是它的外觀：https : //i.stack.imgur.com/Lgl9p.png

這是我的代碼：

HTML：

<section id="modal">
    <div class="backdrop">
        <cel-dialog [backdrop-dismiss]="true" class="modal-dialog">
            <div class="modal-container">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h3 class="title">Conditions of Demo Account Access</h3>
                    <div class="close-modal-button">X</div>
                </div>
                <div class="modal-body">
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedyzzzz</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                    <div class="test">Boedy</div>
                </div>
                <div class="modal-footer">Footer</div>
            </div>
        </cel-dialog>
    </div>
</section>

CSS：

.backdrop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.75);
}
.modal-dialog {
    width: 600px;
    height: 250px;
    position: fixed;
    margin: 10% auto;
    left: 0;
    right: 0;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    background: var(--white);
}

.modal-container {
    min-height: 0;
    height: 250px;
    width: 100%;
}

.modal-header {
    height: 20%;
    background-color: var(--blueDark);
    color: white;
}

.modal-body {
    height: 70%;
    overflow-y: auto;
}

.modal-footer {
    height: 10%;
    background-color: black;
}

.modal-header .title {
    margin-left: 10px;
}
.modal-header .close-modal-button {
    margin-right: 10px;
}

uj5u.com熱心網友回復：

_modal.scss 的 .modal-dialog 類中的指標事件設定為“無”，您可以通過這種方式更改它：

.modal-dialog {
   .
   .
   .
   /* Add Line Below */
   pointer-events:unset !important;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/343783.html

標籤：html css 有角的模态对话框溢出

上一篇：授權標頭角度http錯誤

下一篇：將不同的物件排序到Typescript中的組合串列中