Question

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

请查看我在此链接上使用的模式的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;
}

我想使用＆＃34; top＆＃34;和＆＃34;左＆＃34;风格属性。但似乎这个模态在其库中具有默认写入的中心，您也可以查看该链接。请高度赞赏任何帮助。

Answer 1

您用于创建此弹出模式的库是通过动态计算top和left样式在中心中设置模式，然后将它们应用于内联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会使目标元素左/上优先于任何针对同一元素的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样式属性

3 个答案: