gpt4 book ai didi

html - VanillaModal 如何让 close jpeg 始终位于模态框的右上角?

转载 作者:行者123 更新时间:2023-11-28 10:11:33 24 4
gpt4 key购买 nike

我正在使用 vanillamodal ( http://cocopon.me/app/vanillabox/demo.html ) 并希望将关闭按钮始终放置在任何模式框的右上角。我的代码:http://jsfiddle.net/bcj5S/

.vnbx-content > iframe {
border-width: 0;
vertical-align: middle;
margin: 0 auto;

.vnbx-close {
background-image: url("img/close.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 12px;
width:670px; height:29px; display:block; z-index:3200; position:absolute; top:7px;
right:75px; cursor:pointer; outline: 0;}
}

Good!

Bad!

最佳答案

基本上,必须使用您正在显示的模式对话框的坐标系来定位关闭按钮。如果对话框是相对、绝对或“固定”定位的,那么在该 block 内,使用绝对定位,您可以在右上角或任何您想要的位置放置一个关闭按钮。

这里有一个简单的 fiddle 来说明纯 CSS 对话框模式:CSS-only Modal .

请注意,模态本身是绝对定位的,x 元素也是使用模态的坐标系绝对放置的:

<input type = "checkbox" id = "closeToggle" />
<label for = "closeToggle">Open</label>
<div id = "modal">
<label for = "closeToggle"></label>
Content goes here...
</div>

这是 CSS:

input[type = "checkbox"] {
display: none;
}

label {
cursor: pointer;
}

#modal {
width: 200px;
height: 200px;
border: 1px solid blue;
position: absolute;
display: none;
}

#modal > label {
position: absolute;
top: -20px;
left: -10px;
}

#modal > label:before {
content: "x";
}

input:checked ~ #modal {
display: block;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}

希望对您有所帮助。

关于html - VanillaModal 如何让 close jpeg 始终位于模态框的右上角?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24354963/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com