我如何修改模态弹出窗口的位置 CSS 样式属性

Question

我有这个 jquery bpopup momadal，我想相对于鼠标点击的坐标进行定位。我能够捕获坐标并将它们传递给样式 sheet 甚至当我明确编码它们时模态似乎不支持定位属性.

请查看我在此 link 上使用的模态的 JS 文件：http://jsfiddle.net/24a9b/

#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.bClose{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}

我想使用 "top" 和 "left" 样式属性。但似乎这个模态在其库中将中心作为默认 writen，您也可以查看 link。如有任何帮助，我们将不胜感激。

Answer 1

您用来创建此弹出模式的库正在通过动态计算 top 和 left 样式在 center 中设置模式，然后它以内联 css 样式的形式将它们应用于元素。

因此，如果您想覆盖 top 和 left 以提供您自己的值，您可以通过将样式设置为 !important.

#element_to_pop_up { 
    left: 10px !important;
    top:10px  !important;
}

已更新 JSFiddle：https://jsfiddle.net/24A9b/13946/

Answer 2

您可以使用

left: 10px !important;

因为模态框的位置已经由您正在使用的库的脚本计算并内联分配。

!important 将使目标元素 left/top 优先于任何针对同一元素的 css 样式。

Answer 3

您可以将 position 属性添加到 bPopup 方法，它将像这样将 x 和 y 位置保存为数组。

$('#element_to_pop_up').bPopup({
    position: [10,100]
});

要将 x 和 y 鼠标坐标传递给弹出窗口，这是一个选项。

$('#my-button').bind('click', function(e) {

    var offset = $(this).offset();
    var x = (e.pageX - offset.left);
    var y = (e.pageY - offset.top);

    // Prevents the default action to be triggered. 
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $('#element_to_pop_up').bPopup({
        position: [x,y]
    });

});

这是一个有效的 Fiddle

我如何修改模态弹出窗口的位置 CSS 样式属性

How can i modify the position CSS style property of my modal pop-up

css

simplemodal

我如何修改模态弹出窗口的位置 CSS 样式 属性

How can i modify the position CSS style property of my modal pop-up

css

simplemodal

我如何修改模态弹出窗口的位置 CSS 样式属性