JQuery UI content for multiple dialogs moving up

Question

If you have several jQuery UI dialogs open on a page with enough content to force a scroll bar, clicking between the dialogs causes the contents of the one that was active to scroll up.

You can see this JSFiddle as an example (one field is next to another): http://jsfiddle.net/kRAd4/ If you scroll them down a little and then click on one box on the other, you will see that this happens.

Is there any way to stop this?

Here is the code used on the JSFiddle site, it is simple:

HTML:

<div class="hi">Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br /></div> <div class="hi">Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br /></div> 

Javascript:

 $(".hi").dialog({ height: 200 }); 

UPDATE: I tried adding return false to the mouseDown and focus dialog options, and that didn't make any difference.

Answer 1

Same as Jared, I found this page that describes the error you are encountering. This really says that 1.9.2 is working fine.

However, most of the time you do not return to previous versions of your project, and I wanted to find a solution that stores your current files. So I tested with some code provided there. I created an html page with your jQuery version 2.0.2 and jQuery UI version 1.10.3.

The following solution fixes your problem, but I would use it only if you are sure that there will be no other consequences, or if you tested it and are satisfied with the result.

I replaced the _moveToTop function in the jQuery user interface file (the whole fragment) with this code fragment (you can find it in the same link here ):

 _moveToTop: function( event, silent ) { var $parent = this.uiDialog.parent(); var $elementsOnSameLevel = $parent.children(); var heighestZIndex = 0; $.each($elementsOnSameLevel, function(index, element) { var zIndexOfElement = $(element).css('z-index'); if (zIndexOfElement) { var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0; if (zIndexOfElementAsNumber > heighestZIndex) { heighestZIndex = zIndexOfElementAsNumber; } } }); var currentZIndex = this.uiDialog.css('z-index'); var moved; if (currentZIndex >= heighestZIndex) { moved = false; } else { this.uiDialog.css('z-index', heighestZIndex + 1); moved = true; } if ( moved && !silent ) { this._trigger( "focus", event ); } return moved; }, 

Answer 2

This seems to be a bug in jQuery UI 1.10, reported here . In your fiddle, if you change jquery to 1.9.1 and jquery ui to 1.9.2, this will work. According to the bug report, it is also fixed in 1.11.