文章/答案/技术大牛

发布

社区首页 >问答首页 >固定位置不在模态窗口上工作。

问固定位置不在模态窗口上工作。
EN

Stack Overflow用户

提问于 2019-10-21 16:27:39

回答 1查看 84关注 0票数 0

我有一个“模式”和CSS的HTML。在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>

javascript

html

css

position

fixed

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-21 16:34:59

也许您需要使用这个CSS：

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

然而，考虑到你没有发布你的CSS，很难理解什么不起作用。

而且，我无法想象类modal-fixed-footer应该出现在哪里，以及如何出现。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58490476

复制

相似问题

问固定位置不在模态窗口上工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定位置不在模态窗口上工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定位置不在模态窗口上工作。
EN