作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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;}
}
最佳答案
基本上,必须使用您正在显示的模式对话框的坐标系来定位关闭按钮。如果对话框是相对、绝对或“固定”定位的,那么在该 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/
我是一名优秀的程序员,十分优秀!