Menu icon Foundation
Set modal top property to Y coordinate of mouse click

I want to set the CSS top property to the Y coordinate of a mouse click using jQuery, but nothing I've tried so far has overwritten the Foundation top property for the modal.  This is my jQuery attempt:

$(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); //for example, log shows 794 , 2742
        console.log(typeof e.pageY); //logs the word number
        $('.mobile-modal').css({"top": e.pageY + " !important"}); //does nothing
    });
});

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>

 

Custom 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-left: 50%;
}

 

I've read that since e.pageY is a number, I don't need to append "px" onto it, though I tried appending `"px !important"` anyway, just in case, but it still didn't work.  I've tried setting .mobile-img CSS top to 0 in the CSS file and then running the code, but no change.  If I set the CSS to 100px, Foundation will add 100px to it's own top property value.  But I want to replace the Foundation top value with the Y coordinate of my mouse click.  Any suggestions would be greatly appreciated.  Thanks!

 

htmlcssjqueryjavascriptmodaltop

I want to set the CSS top property to the Y coordinate of a mouse click using jQuery, but nothing I've tried so far has overwritten the Foundation top property for the modal.  This is my jQuery attempt:

$(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); //for example, log shows 794 , 2742
        console.log(typeof e.pageY); //logs the word number
        $('.mobile-modal').css({"top": e.pageY + " !important"}); //does nothing
    });
});

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>

 

Custom 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-left: 50%;
}

 

I've read that since e.pageY is a number, I don't need to append "px" onto it, though I tried appending `"px !important"` anyway, just in case, but it still didn't work.  I've tried setting .mobile-img CSS top to 0 in the CSS file and then running the code, but no change.  If I set the CSS to 100px, Foundation will add 100px to it's own top property value.  But I want to replace the Foundation top value with the Y coordinate of my mouse click.  Any suggestions would be greatly appreciated.  Thanks!