如何使弹出位置相对于整个页面而不是触发它的按钮

Posted 2023-05-08

【中文标题】如何使弹出位置相对于整个页面而不是触发它的按钮

【英文标题】：How to make popup position relative to overall page instead of button that triggered it

【发布时间】：2021-11-21 14:36:52

【问题描述】：

我正在尝试编写一个在单击图像时触发的弹出窗口，它基本上可以工作，但弹出窗口正在与触发它的图像对齐。我需要将它与整个页面的中心对齐，我尝试弄乱边距并将所有 div 类设置为 align="center" 但这些都没有帮助。这是一个 Elementor 小部件，我认为它基本上只是一个 CSS flexbox。

<div class="popup">
  <img src="image1.png">
</div>
<div class="showcompliant">
  <div class="overlay"></div>
  <div class="img-showcompliant" align="center">
    <div align="right"><span>X</span></div>
      <div class="icon">
  </div>
  <div class="description">
 Lorem ipsum dolor amet sit. 
  </div>
  <div class="illustrationcomplaints"></div>
  <style>
   .illustrationcomplaints 
  background-image: url("image2.png");
  background-repeat: no-repeat;
width:600px;
height: 100px;
   
  </style>
  <div align="center">
  <div class="dismiss-btn">
 
  </div>
 </div>
 </div>
</div>

<style>
 .popup
    margin: auto;
    text-align: center



.popup:hover 

    position: relative;
    top: -5px;  


.popup img
    width: 390px;
    height: 140px;
    cursor: pointer
    z-index: 75;

.showcompliant
    display: none;
    z-index: 101;
    align-self: center;
    margin-left: 50%;
    margin-right: 50%;


.showcompliant .img-showcompliant
    width:650px;
    height:350px;
    align-content: center;
    background: #F2F2F2;
    padding: 20px;
    position: relative;
    z-index: 100;

.img-showcompliant span
    position: absolute;
    cursor: pointer;

.img-showcompliant img

    top: 0;
    left: 0;
   

.description 
    padding:25px;
    color: #1a1a1a;


.overlay 
    align-content: center;

</style>
<script>
$(function () 
    "use strict";
    
    $(".popup img").click(function () 
        var $src = $(this).attr("src");
        $(".showcompliant").fadeIn();
        $(".img-showcompliant img").attr("src", $src);
    );
    
    $("span, .overlay").click(function () 
        $(".showcompliant").fadeOut();
    );
    
);
</script>

【参考方案1】：

美好的一天。尝试帮助您... 据我了解，您需要使用 flexbox 并使用“flex-direction: column;” 请看这个非常简单的 html + css 如何使用它。 如果对您有帮助，请告诉我？

html,body
  height:100%;
  padding:0;
  margin:0;

*
  box-sizing:border-box;

.box
  width:100px;
  height:100px;
  background-color:blue;


.container
  
  width:100%;
  height:100%;
  background-color:#ccc;
  flex-direction:column;
  display:flex;
  justify-content:center;
  align-items:center;
  

<div class="container">
  <div class="box"></div>
 <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>

【讨论】：

我在弹出窗口中添加了一个类似于您的 sn-p 的包装器，它仍然以按钮而不是页面为中心。

没关系，抱歉，我发现了问题，其中一个 CSS 属性的位置设置为相对，只要将所有内容设置为绝对即可。

好！谢谢你..