Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-49474

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

    Details

      Description

      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.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              linda.sui Linda Sui
              Reporter:
              jonathan.mak Jonathan Mak
              Participants of an Issue:
              Recent user:
              Esther Sanz
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Due:
                Created:
                Updated:
                Resolved:
                Days since last comment:
                6 years, 26 weeks, 3 days ago

                  Packages

                  Version Package
                  6.2.2 CE GA3
                  6.2.X EE
                  7.0.0 M2