Фиксированное положение не работает в модальном окне

Question

У меня есть HTML для «модального» и CSS. В CSS я определил классы modal-footer и modal-fixed-footer. Класс modal-fixed-footer не заставляет элемент «прилипать» к экрану, он все еще прокручивается.

<div class="body-blackout"></div>
<button class="btn-big ripple ripple-effect popup-trigger" data-popup-trigger="one">
    Popup Trigger Two
</button>
<button class="btn-big ripple ripple-effect popup-trigger" data-popup-trigger="two">
    Popup Trigger Two
</button>
<div class="popup-modal" data-popup-modal="one">
    <div class="popup-modal-close"></div>
    <h5>Modal One Title</h5>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
        quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
        primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
        luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
        et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
        et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
        egestas mauris at suscipit.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
        quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
        primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
        luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
        et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
        et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
        egestas mauris at suscipit.
    </p>
    <div class="modal-fixed-footer">
        <button class="btn-text ripple ripple-effect ripple-red">Disagree</button>
        <button class="btn-text ripple ripple-effect ripple-green">Agree</button></div>
    </div>
    <div class="popup-modal shadow" data-popup-modal="two">
        <div class="popup-modal-close"></div>
        <h5>Modal With Fixed Footer Title</h5>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
            quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
            primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
            luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
            et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
            et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
            egestas mauris at suscipit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
            quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
            primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
            luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
            et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
            et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
            egestas mauris at suscipit.
        </p>
        <div class="modal-footer">
            <button class="btn-text ripple ripple-effect ripple-red">Disagree</button>
            <button class="btn-text ripple ripple-effect ripple-green">Agree</button>
        </div>
    </div>

Answer 1

Возможно, вам нужно использовать этот CSS:

.modal-fixed-footer {
    position: sticky;
    bottom: -45px !important;
}

Однако, учитывая, что вы не опубликовали свой CSS, трудно понять, что не работает.

Кроме того, я не могу представить, где и как должен появиться класс modal-fixed-footer.