html - 如何使模态停留在滚动条上

Question

我的页面中有一个简单的弹出模式，我希望在滚动页面时保留此模式。

这是我的模式

<div class="modale" id="ouibounce-modal" style="display:none">
            <button type="button" id="pop_up_close" class="close" data-dismiss="modal">&times;</button>
            <img id="pop_up" src="images/caly_popup.png">
</div>

这是我的解决方案

.modale {
    height: calc(100vh - 126px);
    overflow-y:scroll;
  }

这不起作用，我需要做什么才能让它起作用？

Answer 1

Try this

  

 .modale {
    height:100vh;
    overflow-y:scroll;
    position: fixed;
    background: red;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin:auto;
  
  }

<div class="modale" id="ouibounce-modal">
            <button type="button" id="pop_up_close" class="close" data-dismiss="modal">&times;</button>
            <img id="pop_up" src="images/caly_popup.png">
</div>