这一次,我将包含代码(正如之前被问到的那样)。问题是,即使这段代码做了我需要的(CSS 模态/灯箱窗口),我也无法让它对顶部和翻译属性进行动画处理。我认为这是一个定位问题,因为原始示例没有对容器使用位置,而是使用了 :before 伪元素(我不喜欢它)。这段代码有什么问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Pure CSS Modal Window</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
.modal-container
{
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-content
{
position: absolute;
top: -100%;
left: 50%;
width: 70%;
max-width: 400px;
max-height: 400px;
transform: translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
transition: all 5s;
}
.modal-container:target
{
display: block;
}
.modal-container:target .modal-content
{
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<a href="#modal1">Modal 1</a>
<a href="#modal2">Modal 2</a>
<div class="modal-container" id="modal1">
<div class="modal-content">
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<a href="#modal-close">Close</a>
</div>
</div>
<div class="modal-container" id="modal2">
<div class="modal-content">
<p>This is the content of Modal 2</p>
<a href="#modal-close">Close</a>
</div>
</div>
</body>
</html>
这是因为display
状态从display: none
变为display: block
,这意味着没有先前的布局可以在两者之间转换。
一种选择是用visibility: hidden
替换display: none
,用visibility: visible
替换display: block
。
工作示例:
*
{
margin: 0px;
padding: 0px;
}
.modal-container
{
position: fixed;
visibility: hidden;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
}
.modal-content
{
position: absolute;
top: -100%;
left: 50%;
width: 70%;
max-width: 400px;
max-height: 400px;
transform: translateX(-50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
transition: all 5s;
}
.modal-container:target
{
visibility: visible;
}
.modal-container:target .modal-content
{
top: 50%;
transform: translate(-50%, -50%);
}
<a href="#modal1">Modal 1</a>
<a href="#modal2">Modal 2</a>
<div class="modal-container" id="modal1">
<div class="modal-content">
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<p>This is the content of Modal 1</p>
<a href="#modal-close">Close</a>
</div>
</div>
<div class="modal-container" id="modal2">
<div class="modal-content">
<p>This is the content of Modal 2</p>
<a href="#modal-close">Close</a>
</div>
</div>
Alexander O'Mara提供的解决方案效果很好(也教会了我一点),但我找到了另一个答案。我只是将两个 DIV 分开就解决了它。我的意思是,而不是:
<div class="container">
<div class="content">
<p>Content here</p>
</div>
</div>
我使用过:
<div class="container">
</div>
<div class="content">
<p>Content here</p>
</div>
对于我使用的 CSS:
.container:target + .content {}
而不是
.container:target .content {}
所有这一切都没有像亚历山大建议的那样将"显示:无"更改为"可见性:隐藏",并且效果很好。感谢您的帮助。很高兴看到世界各地的人们担心别人的问题并试图解决这些问题。
干杯。马塞洛。