javascript - 奇怪的行为 --- 弹出模式在背景图像中显示白色边框网格 onclick
问题描述
问题:
当单击图像“gamers Blade chair,第一个是我应用测试模态代码的位置”时,它会打开模态,但在背景中的图库图像上显示白色边框,请参阅:
我不知道是什么原因造成的,所以这就是我在这里的原因
这是CSS代码:CSS
这是模态CSS代码:
/* modal */
/* Style the Image Used to Trigger the Modal */
#myImg1 {
cursor: pointer;
transition: 0.3s;
}
#myImg1:hover {opacity: 0.7;}
/* The Modal (background) */
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content1 {
margin: auto;
display: block;
width: 100%;
max-width: 500px;
}
/* Add Animation - Zoom in the Modal */
.modal-content1{
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 300px){
.modal-content1 {
width: 100%;
}
}
/* endmodal*/
谢谢转发
解决方案
问题是您的代码的这一部分:
/* The Modal (background) */
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */ --------------------------> It's not enough because '.product-card:before' has the same value
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
您设置 z-index: 1,如果您更改为 z-index: 2 将解决您的问题。
检查文档以更好地了解您的问题:https ://developer.mozilla.org/en-US/docs/Web/CSS/z-index
推荐阅读
- javascript - 从 React 中的 API 访问数据时重新渲染过多
- azure - 我们可以使用全局参数来创建 ADLS/DataBricks 链接服务吗
- c - __get_vm_area_node 中出现 BUG_ON 的原因是什么?
- r - ggplot中面板之间的边距
- c++ - 你如何访问其他类的功能?
- laravel - How can updating children components in table using livewire?
- excel - 使用excel VBA查找每列中最后使用的行数
- javascript - 数据表不显示数据
- sql - 如何将GETDATE(仅日期)作为sql server中的参数传递?
- django - Django - 加载转储后仅迁移新迁移