If a user scrolls down onto a page, clicks a link that opens a modal window and resizes the browser, the "top" and "left" style values can be incorrect.

For example, I opened a login modal (from the modal_forms project) which is towards the bottom of a page. Then I ran the following debugging information in the chrome console.

jQuery("#modalContent").position().top; // returns 7901
jQuery(window).resize();
jQuery("#modalContent").position().top; // returns 29

The above code shows that the modal window is at the top of the page. Now a user needs to scroll up to see the modal window.

The code is wrong because it ignores that a user could have scrolled to a different portion of the page.

The code that is wrong is

      var mdcTop = wt + ( winHeight / 2 ) - (  modalContent.outerHeight() / 2);
      var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);

It can be changed to factor in the user's scrolling. This also checks for a negative left, which would be caused by a large modalContent.outerWidth() and a small winWidth.

      var mdcTop =  $(document).scrollTop() + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);
      var mdcLeft = $(document).scrollLeft() + ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
      if(mdcLeft < 0) { mdcLeft = 0; }
Files: 
CommentFileSizeAuthor
#1 Modal-window-top-and-left-style-values-2055785-1.patch744 bytesroberttstephens
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es).
[ View ]

Comments

Status:Active» Needs review
StatusFileSize
new744 bytes
PASSED: [[SimpleTest]]: [MySQL] 121 pass(es).
[ View ]

Attached a patch.

Issue summary:View changes

Typo

Issue summary:View changes

Slight change in "code that's wrong"