点击时不显示弹出内容。 我只会放置代码的缩短版本。 单击按钮时,应显示内容。 html 按钮将触发 js 代码以将 css 设置为活动状态。 CSS 将显示弹出窗口的活动版本,使其可见。
function togglePopup() {
document.getElementById("popup_chicken").classList.toggle("active");
}
.chicken {
background: rgb(0, 0, 0, 0.5);
width: 100%;
height: auto;
text-align: center;
z-index: 2;
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
&_content {
display: inline-block;
background-color: black;
border-radius: 30px;
box-shadow: -5px 5px 10px black;
padding: 20px;
width: 80%;
margin-top: 3%;
margin-bottom: 3%;
&_buttons {
margin: 15px 0;
&_close {
background-color: $b;
cursor: pointer;
border-radius: 50px;
border-style: hidden;
padding: 20px 30px;
margin: 0 25px;
}
.chicken.active .chicken {
transform: translate(-50%, -50%) scale(1);
transition: all 300ms ease-in-out;
visibility: visible;
}
}
<button onclick="togglePopup()">
click me!
</button>
<div class="chicken" id="popup_chicken">
<div class="chicken_content">
content here
<button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
</div>
</div>
我不确定这是否是你想要的,但你可以尝试一下;
function togglePopup() {
var element = document.getElementById("trt2");
element.classList.toggle("mystyle");
}
.mystyle {
transform: translate(-50%, -50%) scale(1);
transition: all 300ms ease-in-out;
visibility: visible;
}
<button onclick="togglePopup()">click me!</button>
<div class="chicken" id="trt2">
<div class="chicken_content" id="trt">
content here
<button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
</div>
</div>
您的嵌套 css 应如下所示。欲了解更多信息,请点击此链接了解更多详情
function togglePopup() {
document.getElementById("popup_chicken").classList.toggle("active");
}
.chicken {
background: rgb(0, 0, 0, 0.5);
width: 100%;
height: auto;
text-align: center;
z-index: 2;
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
& .chicken_content {
display: inline-block;
background-color: black;
border-radius: 30px;
box-shadow: -5px 5px 10px black;
padding: 20px;
width: 80%;
margin-top: 3%;
margin-bottom: 3%;
}
& button {
margin: 15px 0;
color: red;
}
& .chicken_buttons_close {
background-color: gray;
cursor: pointer;
border-radius: 50px;
border-style: hidden;
padding: 20px 30px;
margin: 0 25px;
}
&.active{
transform: translate(-50%, -50%) scale(1);
transition: all 300ms ease-in-out;
visibility: visible;
}
}
<button onclick="togglePopup()">
click me!
</button>
<div class="chicken" id="popup_chicken">
<div class="chicken_content">
content here
<button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
</div>
</div>
.