固定位置不适用于 Modal Window
Position fixed is not working on Modal Window
我有 HTML 个 "Modal" 和 CSS。在 CSS 中,我定义了 modal-footer
和 modal-fixed-footer
classes。 modal-fixed-footer
class 不会导致项目 "stick" 到屏幕,它仍然滚动。
<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>
也许你需要用到这个CSS:
.modal-fixed-footer {
position: sticky;
bottom: -45px !important;
}
但是考虑到您没有 post 您的 CSS 很难理解什么不起作用。
此外,我无法想象 class modal-fixed-footer
应该出现在哪里以及如何出现。
我有 HTML 个 "Modal" 和 CSS。在 CSS 中,我定义了 modal-footer
和 modal-fixed-footer
classes。 modal-fixed-footer
class 不会导致项目 "stick" 到屏幕,它仍然滚动。
<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>
也许你需要用到这个CSS:
.modal-fixed-footer {
position: sticky;
bottom: -45px !important;
}
但是考虑到您没有 post 您的 CSS 很难理解什么不起作用。
此外,我无法想象 class modal-fixed-footer
应该出现在哪里以及如何出现。