AUI Modal popup is displayed at the top of the current page instead of where the modal was called

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 6.2.X EE
• Fix Version/s: 6.2.2 CE GA3 , 6.2.X EE, 7.0.0 M2
• Component/s: Frontend Infrastructure
• Labels:
  • QA-TP
  • liferay-fixpack-dynamic-data-lists-13-6210
  • liferay-fixpack-user-interface-18-6210
• Branch Version/s:
  6.2.x
• Backported to Branch:
  Committed
• Story Points: 6
• Fix Priority: 3
• Application Servers:
  Apache Tomcat 7.0
• Browsers:
  Chrome (latest)
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/20716

Description:
The client has requested analysis of an issue where the Modal popups at the bottom of the page are being displayed at the top of the current page, and scrolling users to the top of the page, instead of where the modal was invoked. They have mentioned that this never occurred in AUI 1.5 but seems to be happening in AUI 2.0 as seen in Liferay 6.2.

Steps to reproduce:
1. Start off on clean bundle
2. Create a new web content structure with the following src:

<root available-locales="en_US" default-locale="en_US">
    <dynamic-element dataType="html" fieldNamespace="ddm" indexType="keyword" name="Placeholder" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-text-html" width="small">
        <meta-data locale="en_US">
            <entry name="label">
                <![CDATA[Placeholder]]>
            </entry>
            <entry name="predefinedValue">
                <![CDATA[]]>
            </entry>
            <entry name="tip">
                <![CDATA[]]>
            </entry>
        </meta-data>
    </dynamic-element>
</root>

3. Link this structure to a new template:

<#--
Web content templates are used to lay out the fields defined in a web
content structure.

Please use the left panel to quickly add commonly used variables.
Autocomplete is also available and can be invoked by typing "${".
-->

<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<button id="showModal" class="btn">Show Modal</button>

<div class="yui3-skin-sam">
    <div id="modal"></div>
</div>
<script>
YUI().use(
  'aui-modal',
  function(Y) {
    Y.one('#showModal').on(
      'click',
      function() {
           var modal = new Y.Modal(
      {
        bodyContent: 'This a test.',
        centered: true,
        destroyOnHide: true,
        headerContent: '<h3>Test</h3>',
        height: 200,
        modal: true,
           centered : true,
        destroyOnHide : true,
        zIndex : 1100,
        width : 300,
        visible : true,
        resizable : false,
        close : true
      }
    ).render();
      }
    );
  }
);
</script>

4. After you are done with this, add a Web Content Display portlet to a page
5. Create a new web content article with this structure/template combo
6. Select this new content as the article you would like to display in Web Content Display
7. After this article is selected, scroll down and click the "Show Modal" button within the Web Content Display portlet
Result: Modal (popup) box scrolls all the way to the top, instead of opening at the current location of where the modal button was clicked. The subscriber reports that this is in contrast to AUI 1.5's behavior.

Expected Result:
Modal displays where the button was clicked.

Actual Results:
Modal displays at the top of the page, and the position is lost.

Branch:
commit cf455acc92b43eee8f43b103a809a0240828fba4
Reproduced.

Master:
commit 1ac80c24533c9638edb57ef9ed35b3e80ea89d5a
Reproduced. Extra white space up top where modal is displayed, too.