jquery - 将关闭图标添加到固定到特定位置的模态弹出窗口

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>

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

我有一个简单的“x”图标透明 png，我想将其悬停在该区域的右上角。它不需要任何特殊编码，因为从技术上讲，单击它是在模态范围之外单击，无论如何都会将其关闭。

我如何添加此 png 使其始终锁定在模态的右上角但位于主类之外，因为我希望它被视为页面的“外部”或关闭触发区域？

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/

试试吧，如果有帮助请告诉我!