ChadD ChadD - 2 months ago 14x
jQuery Question

jQuery Modal dialog not displaying center of screen, I have to scroll down

I'm not sure why I am having trouble with this particular jQuery Modal. I have links next to each row of a table. When the user clicks it, I present a modal dialog to confirm that he wants to deleted the selected row. When the table is long, the screen scrolls to the top, and then the user has to scroll back down to where the row was o confirm.

Why doesn't the modal simply get placed directly on top center of the existing screen while maintaining tghe scroll position?

<a href="#" onclick='@string.Format("ConfirmCancelReadyToRun(this,
'{0}','{1}','{2}')", item.VendorId, item.RunYearMonth, string.Format("{0:yyyy/MMM}", item.RunYearMonth))'>Cancel</a>


function ConfirmCancelReadyToRun(link, vendorId, runYearMonthDate, runYearMonthDisplay) {

var $myDialog = $("<div></div>")
.html("Are you sure that you want to Cancel the Ready to Run for Vendor ID " + vendorId + " on " + runYearMonthDisplay + "?")
modal: true,
autoOpen: false,
title: "Confirm Cancel",
my: "center",
at: "center",
of: window,
buttons: {
"Cancel": function () {
return false;
"OK": function () {
var form = $(link).parents("form:first");
var actionString = encodeURI(CorrectUrl("/ReadyToRun/CancelReadyToRun?vendorId=" + vendorId + "&runYearMonthDate=" + runYearMonthDate));
form.attr("action", actionString);
return true;



The reason it scrolls to the top of the screen is because your anchor tag is referencing the empty bookmark href i.e. href="#" if you make a "fake link" that looks like a link but is actually a span or a div, with all the hover over styling etc. in css, then you can launch the dialog on click without having to href link to anywhere.

I'd also recommend binding to the click event on the element in jQuery using a class and the $('.classname').on('click', function(){}); syntax and storing the parameters on the element in the data attribute. You can then lift these in the function body from $(this).data()