html - 如何使弹出位置相对于整个页面而不是触发它的按钮
问题描述
我正在尝试编写一个在单击图像时触发的弹出窗口,它基本上可以工作,但弹出窗口正在将自身与触发它的图像对齐。我需要将它与整个页面的中心对齐,我尝试弄乱边距并将所有 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>
解决方案
再会。尝试帮助您...
据我了解,您需要使用 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>
推荐阅读
- linux - 使用awk解析转换如下日志
- kubernetes - GKE 中的私有集群如何对同一子网中的 GCP 计算实例 (VM) 进行身份验证?
- wordpress - Wordpress 中的联系表格 7 - 如何隐藏电子邮件中的空白字段?
- reactjs - 无法让 npm 运行启动 testcafe 的脚本
- lua - 为什么这段代码意味着所有表共享一个元表
- javascript - jQuery 在单击下一步时显示和隐藏表单
- azure - 将 DataFactory 连接到 Lotus notes DB
- powerbi - Power BI - 应用筛选器时,度量随机返回空白
- javascript - 参数值未在 JavaScript 中传递
- node.js - 如何将流通过管道传输到节点中的文件描述符?