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

Question

我正在使用 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;}
}

Answer 1

基本上，必须使用您正在显示的模式对话框的坐标系来定位关闭按钮。如果对话框是相对、绝对或“固定”定位的，那么在该 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;
}

希望对您有所帮助。