AMP IFrame is not working in AMP LightBox

user_4545090 0
Viewed 2943

Example:-

  <amp-lightbox id="my-lightbox" layout="nodisplay">
    <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
      <amp-iframe width="350" height="300" layout="fixed" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://ampbyexample.com/"></amp-iframe>
    </div>
 </amp-lightbox>

<button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0">Open Iframe in Lightbox</button>

I also tried to manipulate the position of iFrame 75% or 600px from the top but it's also not working.

The AMP iFrame contains Jquery UI Calendar which we want to use to get the delivery date selected by the user in our AMP Page.

Is it possible to get and pass the value in AMP iFrame?

amp-html
2 Answers

AMP Iframe will not worked because An amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below). The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.

It is possible to have an amp-iframe appear at the top of a document when the amp-iframe has a placeholder element as shown in the example below. The amp-iframe must contain an element with the placeholder attribute, (for instance an amp-img element) which would be rendered as a placeholder until the iframe is ready to be displayed. for more information, please follow the link.

You are using the lightbox which is position fixed and within the first 75% of the viewport.

The alternate way to use calender in AMP page is AMP-datepicker. For More Information, please follow the link.

user_82690830
Related