Question

我想使用jQuery将CSS top属性设置为鼠标点击的Y坐标，但到目前为止我没有尝试过覆盖模态的Foundation Zurb顶级属性。奇怪的是，我的代码确实正确地将鼠标点击的X坐标分配给模态的左侧属性。这是我的jQuery尝试：

var mouseX;
var mouseY;
$(document).ready(function(){    
    $('a.open-mobile').click(function(event){
        event.preventDefault();
        $('#mobile-modal').foundation('reveal', 'open');
    });
    $('#house-mobile').click(function (e) { //Default mouse Position 
        console.log(e.pageX + ' , ' + e.pageY);
        mouseX = e.pageX; 
        mouseY = e.pageY;
        $('#mobile-modal').css({'top':mouseY, 'left':mouseX});
    });
});

HTML：

<a xlink:href="#" class="open-mobile" data-reveal-id="mobile-modal" title="Mobile devices" id="house-mobile">
    <img... />
</a>

<div id="mobile-modal" class="reveal-modal image-modals mobile-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <p>Text here.</p>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

自定义CSS：

.image-modals {
    width: 380px !important;
    height: auto;
    padding: 34px !important;
    border-radius: 16px;
    box-shadow: 6px 6px 8px rgba(0,0,0,0.11);
}
#mobile-modal {
    margin: 0 !important;
}

我已经读过，因为e.pageY是一个数字，我不需要在其上附加“px”，尽管我尝试追加"px !important"，以防万一，但它仍然没有工作。我也尝试将" !important"附加到mouseY，但仍然没有骰子。我已经尝试在CSS文件中将.mobile-img CSS top设置为0，然后运行代码，但没有变化。如果我将CSS设置为100px，Foundation将为其自己的顶级属性值添加100px。但是我想用我点击鼠标的Y坐标替换Foundation top值。为什么X工作，但Y不工作？我认为Foundation Zurb javascript正在确定模态的最高值，但为什么我不能覆盖它呢？任何建议将不胜感激。谢谢！

将Foundation模态顶部属性设置为鼠标单击的Y坐标

0 个答案: