Question

我在一个非常简单的全白色纯色背景（不是图像）的网站上触发了一个模态弹出窗口。 css样式如下：

<style>
        #element_to_pop_up 
        {
             display:none;
             background-color:#ffffff;
             width:500px;
             height:250px;
             padding-left:20px;
             padding-right:20px;
             padding-top:20px;  
        }
    </style>

要关闭模态，您可以单击模态范围外的任何位置。

我有一个简单的＆＃34; x＆＃34;图标透明png，我想将鼠标悬停在右上角的这个区域。它不需要任何特殊的编码，因为点击它在技术上点击模态的范围之外，无论如何都会关闭它。

如何将此png添加到始终锁定在模态的右上角但位于主类之外，因为我希望它被视为＆＃34; outside＆＃34;或页面的近触发区域？

Answer 1

考虑这个HTML：

<div id="element_to_pop_up">
    <span>X</span> // This part can be your image
</div>

您可以使用绝对定位将其放在您想要的位置：

#element_to_pop_up {
    background-color:#000;
    width:500px;
    height:250px;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    margin: 30px;
    position: relative;
}

#element_to_pop_up span {
    position: absolute;
    right: -15px;
    top: -15px;
}

JSFiddle：http://jsfiddle.net/b3a10w0w/

尝试一下，让我知道它是否有帮助！

向模态弹出添加关闭图标，锚定到特定位置

1 个答案: