html - VanillaModal如何在模态框的右上方始终保持紧密的jpeg？

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

最佳答案

基本上，必须使用显示的模式对话框的坐标系来定位关闭按钮。如果对话框是相对，绝对或“固定”放置的，则在该块内使用绝对放置将关闭按钮放置在右上角或所需的任何位置。

这是一个快速的小提琴，用于说明纯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如何在模态框的右上方始终保持紧密的jpeg？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24354963/