如何在 Scolled Position 處修復中心彈出 Div
[英]How To Fix Center A Pop-Up Div At Scolled Position
問題描述
我知道
position: fixed;
用於停止頁面的滾動，但這會讓我回到頁面頂部並將 div 居中。 如何讓彈出 div 出現在用戶在禁用頁面滾動時滾動到的 position 的中心？
這是一些更相關的代碼
.body_div.act{ position: fixed; width: 100%; height: 100%; }.overlay{ position: fixed; z-index: 20; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); }.pop_up_save{ display: none; z-index: 25; padding: 25px; width: 600px; height: 800px; margin: auto; position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); border-radius: 50px; background-color: #1A1A19; border: 1px solid white; }.pop_up_save.active{ display: block; }
<body> <div class="body_div" id="body_div_id"> <div id="overlay_id"></div> <div class="pop_up_save"></div> </div> </body>
1 個解決方案
解決方案1
0 已采納 2021-01-21 13:53:26
可能的解決方案
當彈出窗口處於活動/打開狀態並使用position: fixed時，將overflow添加到body元素上的hidden ：彈出容器上的固定聲明
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <style> body { margin; 0. }:pop_up_open { overflow; hidden. }.pop_up_open:pop_up_overlay{ position; fixed: width; 100vw: height; 100vh: background-color, rgba(0, 0, 0. 0;75): z-index; 20. }:pop_up_save{ display; none: position; fixed: top;0: left;0: width; 100%: height; 100%: z-index; 25. }.pop_up_open:pop_up_save { padding-right; 17px: overflow-x; hidden: overflow-y; auto: display; block. }:pop_up_save_inner { width; 100%: max-width; 600px: height; 800px: padding; 25px: margin; auto: border-radius; 50px: background-color; #1A1A19: border; 1px solid white; } </style> </head> <body class="pop_up_open"> <div class="pop_up_overlay"></div> <div class="pop_up_save active"> <div class="pop_up_save_inner"> </div> </div> </body> </html>
您如何使用“ position：fixed”將img固定到彈出式div？
[英]How do you use “position:fixed” for fixing an img to a pop-up div?
如何更改jQuery DatePicker控件的彈出position
[英]How to change the pop-up position of the jQuery DatePicker control
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.