Create Popup Modal in AMP with Open and Close functionality

The code can be helpful if you are looking to create a popup modal using AMP with open and close functionality.

<!--Add lightbox library to your head tag-->
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<!--Add modal custom style to head tag-->
<style amp-custom>
    body {font-family: Arial, Helvetica, sans-serif;}
    .button_wrapper {display: flex;align-items: center;justify-content: center;height: 100vh; width: 100%;flex-direction: column;}
    .button_wrapper button {padding: 20px 50px;background-color: #000; border: 0;color: #fff;cursor: pointer;margin-bottom: 20px;}

    /*Modal CSS starts here*/
    .modal_wrap {position: fixed; top: 0; left: 0;height: 100%; width: 100%;}
    .modal_overlay {background: rgba(0,0,0,.8);width: 100%;height: 100%;position: absolute;}
    .modal {background: #fff;position: absolute;width: 600px;top: 50%;left: 50%;border-radius: 9px;transform: translate(-50%,-50%);}
    .close {position: absolute;top: 10px;right: 10px;font-size: 1.4rem;width: 40px;height: 40px;line-height: 40px;text-align: center;box-shadow: 0 0 4px 0 #a2a2a2;border-radius: 50%;color: #797979;cursor: pointer;}
    .modal .modal_heading {padding: 25px 25px 7px;font-weight: bold;font-size: 1.2rem;}
    .modal .modal_body {padding: 0 25px 25px}
    .modal .modal_body p {font-size: 1rem;line-height: 1.6;}
</style>

 <!-- Add HTML markup to your body tag to create popup modal-->
<div class="button_wrapper">
    <button on="tap:popup" on="tap:popup" role="button">Open popup</button>
    <a href="">Click here to get the code</a>
</div>

<amp-lightbox id="popup" layout="nodisplay">
    <div class="modal_wrap" class="lightbox">
        <div class="modal_overlay" on="tap:popup.close" role="button"></div>

        <div class="modal">
            <span class="close" on="tap:popup.close" role="button">&times;</span>
            <div class="modal_heading">Heading of Modal</div>
            <div class="modal_body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                    in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</amp-lightbox>

Using this code snippet we are making a popup modal on the AMP page which will open on button click. The modal will have a partially transparent overlay which will have a close event on its click. We will implement that using amp-lightbox script. Let's try to understand it step by step.

Add amp-lightbox script library to your AMP page

Inside your head tag add amp-lightbox library. The library import code can be found below.

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

Add custom CSS code to style your popup modal

You can change the style of your popup modal by adding the custom style to it. We have created the popup by using the below custom css. Paste the below style code between your head tags.

<style amp-custom>
body {font-family: Arial, Helvetica, sans-serif;}
.button_wrapper {display: flex;align-items: center;justify-content: center;height: 100vh; width: 100%;flex-direction: column;}
.button_wrapper button {padding: 20px 50px;background-color: #000; border: 0;color: #fff;cursor: pointer;margin-bottom: 20px;}

/*Modal CSS starts here*/
.modal_wrap {position: fixed; top: 0; left: 0;height: 100%; width: 100%;}
.modal_overlay {background: rgba(0,0,0,.8);width: 100%;height: 100%;position: absolute;}
.modal {background: #fff;position: absolute;width: 600px;top: 50%;left: 50%;border-radius: 9px;transform: translate(-50%,-50%);}
.close {position: absolute;top: 10px;right: 10px;font-size: 1.4rem;width: 40px;height: 40px;line-height: 40px;text-align: center;box-shadow: 0 0 4px 0 #a2a2a2;border-radius: 50%;color: #797979;cursor: pointer;}
.modal .modal_heading {padding: 25px 25px 7px;font-weight: bold;font-size: 1.2rem;}
.modal .modal_body {padding: 0 25px 25px}
.modal .modal_body p {font-size: 1rem;line-height: 1.6;}
</style>

Finally, create your popup modal HTML structure

Now create your HTML structure to add a popup modal on your AMP page. We will use the amp-lightbox AMP HTML tag to add the open and close functionality to our popup. Paste the below HTML code inside your body tag of the AMP page.

<div class="button_wrapper">
    <button on="tap:popup" on="tap:popup" role="button">Open popup</button>
    <a href="">Click here to get the code</a>
</div>

<amp-lightbox id="popup" layout="nodisplay">
    <div class="modal_wrap" class="lightbox">
        <div class="modal_overlay" on="tap:popup.close" role="button"></div>

        <div class="modal">
            <span class="close" on="tap:popup.close" role="button">×</span>
            <div class="modal_heading">Heading of Modal</div>
            <div class="modal_body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                    in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</amp-lightbox>

The above code will generate the output shown in the below screenshot.

The full code of the AMP page can be found below.

<!doctype html>
<html amp lang="en">
    <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title>AMP popup modal example - Devsheet</title>
        <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
        <meta name="viewport" content="width=device-width">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
        <style amp-custom>
            body {font-family: Arial, Helvetica, sans-serif;}
            .button_wrapper {display: flex;align-items: center;justify-content: center;height: 100vh; width: 100%;flex-direction: column;}
            .button_wrapper button {padding: 20px 50px;background-color: #000; border: 0;color: #fff;cursor: pointer;margin-bottom: 20px;}

            /*Modal CSS starts here*/
            .modal_wrap {position: fixed; top: 0; left: 0;height: 100%; width: 100%;}
            .modal_overlay {background: rgba(0,0,0,.8);width: 100%;height: 100%;position: absolute;}
            .modal {background: #fff;position: absolute;width: 600px;top: 50%;left: 50%;border-radius: 9px;transform: translate(-50%,-50%);}
            .close {position: absolute;top: 10px;right: 10px;font-size: 1.4rem;width: 40px;height: 40px;line-height: 40px;text-align: center;box-shadow: 0 0 4px 0 #a2a2a2;border-radius: 50%;color: #797979;cursor: pointer;}
            .modal .modal_heading {padding: 25px 25px 7px;font-weight: bold;font-size: 1.2rem;}
            .modal .modal_body {padding: 0 25px 25px}
            .modal .modal_body p {font-size: 1rem;line-height: 1.6;}
        </style>
    </head>
  <body>
        <div class="button_wrapper">
            <button on="tap:popup" on="tap:popup" role="button">Open popup</button>
            <a href="">Click here to get the code</a>
        </div>

        <amp-lightbox id="popup" layout="nodisplay">
            <div class="modal_wrap" class="lightbox">
                <div class="modal_overlay" on="tap:popup.close" role="button"></div>

                <div class="modal">
                    <span class="close" on="tap:popup.close" role="button">×</span>
                    <div class="modal_heading">Heading of Modal</div>
                    <div class="modal_body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                            in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
            </div>
        </amp-lightbox>
  </body>
</html>

Was this helpful?