Modal jumps to top of page when you open a modal after scrolling down the page [#805704]

I am doing a modal dialog using ctools for the content analysis module. I have a problem that only happens in IE (if I had a nickel), works fine in FF and Crome. When the ctools modal loads the modal jumps to the top of the page, e.g. I have to scroll up to get back to it.

The modal dialog has two loading steps, one that launches the modal and loads the ctools content. Then the ctools content loads the content analysis content. The modal is correctly positioned when it first launches, then as soon as the ctools content loads it jumps up the page.

Here is my implementation code:

/**
 * Returns Chaos Tools modal popup
 */
function contentanalysis_modal_popup() {
  ctools_include('ajax');
  ctools_include('modal');
  $title = t('Content Analysis Results');
  $html = contentanalysis_analyze();
  $output[] = ctools_modal_command_display($title, $html);
  if (!$output) {
    $output = array();
    $output[] = ctools_ajax_command_append('#modal-message', '<div id="message">test text</div>');
    $output[] = ctools_modal_command_dismiss();
  }
  ctools_ajax_render($output);
}

/**
 * Provides modal popup status bar
 */
function contentanalysis_analyze() {
  return '<div id="analysis-modal">' . theme_progress_bar(0, 'Analyzing Content') . '</div>' . $output . '<script>contentanalysis_full_analysis();</script>';
}

I am using this to launch to modal:

      $form['clickme'] = array(
        '#type' => 'markup',
        '#value' => '<div id="contentanalysis-buttons">' . l(t('Analyze content'), base_path() . 'contentanalysis/analyze_js', array('attributes' => array('id' => 'contentanalysis-ininline-analysis-button', 'class' => "contentanalysis-analyze-content contentanalysis-button", "onclick" => "contentanalysis_inline_analysis(); return (false);"))) . '</div>'
      );

Any thoughts would be appreciated. Thanks,

Tom

Comment	File	Size	Author
#6	ctools-modal-resize-jump-805704-6.patch	480 bytes	eric.chenchao
#4	805704_ctools_modal_resize.patch	1.07 KB	zoo33
#2	ctools-modal-resize-805704.patch	1.18 KB	jameso4246

Comments

Comment #1

merlinofchaos commented 15 July 2010 at 22:57

Status:

Active

» Postponed (maintainer needs more info)

Hmm. I can't seem to make this happen under normal conditions using already existing modals.

Do you get this behavior when using page manager and editing a panel? I tried editing a panel and using the add content to see if I could get IE7 to do this, and it doesn't.

Perhaps there is something in the content you're sending that's doing this?

Comment #2

jameso4246 commented 3 October 2011 at 17:16

Status:

Postponed (maintainer needs more info)

» Active

Status	File	Size
new	ctools-modal-resize-805704.patch	1.18 KB

I was experiencing the same issue and found the issue in modal.js. I also found that this issue can be duplicated by resizing the window in any browser and only it happens when you open a modal after scrolling down the page.

The cause is that initializing the modal takes in to account how far down the page you have scrolled whereas the modalContentResize function does not. It was happening in IE when the modal was being initialized because the event handler is defined differently for IE and the resize event was being called unnecessarily after init.

I have attached a patch, but if for some reason it doesn't work for you, the solution is to copy the code that sets the variable 'wt' from the modal init positioning section to the modalContentResize function and changing the following line
var mdcTop = ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);
to
var mdcTop = wt + ( winHeight / 2 ) - ( modalContent.outerHeight() / 2);

Comment #3

rjbrown99 commented 6 December 2011 at 20:05

Status:

Active

» Needs review

Patch here, changing status.

Comment #4

zoo33 commented 2 October 2013 at 14:34

Status	File	Size
new	805704_ctools_modal_resize.patch	1.07 KB

I've seen this happening in Chrome on some pages, not others. Resizing the window always triggers the bug. I made an updated patch with some small changes (avoiding multiple var statements etc.).

Comment #5

2 October 2013 at 14:39

Status:

Needs review

» Needs work

The last submitted patch, 805704_ctools_modal_resize.patch, failed testing.

Comment #6

eric.chenchao commented 19 November 2013 at 01:52

Title:	Modal jumps to top of page in IE	» Modal jumps to top of page when you open a modal after scrolling down the page
Version:	6.x-1.4	» 7.x-1.x-dev
Issue summary:	View changes
Status:	Needs work	» Needs review

Status	File	Size
new	ctools-modal-resize-jump-805704-6.patch	480 bytes

This issue also happens in Chrome, FF and it applies to 7.x-1.x.

The patch is applied to D7, should also work on D6.

Comment #7

acbramley commented 2 April 2014 at 00:40

2 files were hidden/shown/deleted

Status	File	Size
hidden	ctools-modal-resize-805704.patch	1.18 KB
hidden	805704_ctools_modal_resize.patch	1.07 KB

Had this issue with the Edit button on file fields using the media module widget. While there's still the weird issue where the modal appears to the right of the screen while it's loading, this patch did fix the problem of it being at the top of the screen after load.

Edit: Using 7.x-1.4 of ctools and patch applies cleanly

Comment #8

pivica commented 23 July 2014 at 12:48

Patch from #6 works nicely - similar problem for FF and Chrome on modal resize (which happens on ajax load) it is jumping to the top of the page. This patch fix it.

Can we commit this?