{"id":18293,"date":"2021-07-14T12:43:08","date_gmt":"2021-07-14T12:43:08","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=18293"},"modified":"2022-03-17T12:25:47","modified_gmt":"2022-03-17T12:25:47","slug":"how-to-enable-modal-popup-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-enable-modal-popup-in-amp\/","title":{"rendered":"How to enable modal popup in AMP"},"content":{"rendered":"\n<p>In this tutorial, we will show you how to enable modal popup in AMP for this follows the below instructions.<\/p>\n\n\n\n<p>First, you need to purchase and install&nbsp;the&nbsp;<a href=\"https:\/\/ampforwp.com\/amp-popup\/\">Popup for AMP<\/a> plugin.<\/p>\n\n\n\n<p><strong>Here are a few simple steps to enable modal popup in AMP<\/strong><\/p>\n\n\n\n<ol><li>Download and Install the extension from the account area.<\/li><li>After Uploading the plugin, Click on&nbsp;<strong>Activate Plugin<\/strong><\/li><li>Now the&nbsp;<strong>AMP Popup<\/strong>&nbsp;option will be displayed in the WordPress options panel.<\/li><li>After clicking the&nbsp;<strong>AMP Popup<\/strong>&nbsp;option you will be able to see the&nbsp;add your new pop options. <\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"652\" height=\"303\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1.png\" alt=\"\" class=\"wp-image-4927\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1.png 652w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-300x139.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/09\/2-1-100x46.png 100w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/figure>\n\n\n\n<p>5. After filling all the information, scroll down to bottom, here you&#8217;ll find Modal popup option in Advanced Popup settings Section.<\/p>\n\n\n\n<p>6. <strong>When the Popup should display:<\/strong> In this option you need to select Modal option and enter the Modal Button Name as show below the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"403\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-1024x403.png\" alt=\"\" class=\"wp-image-18298\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-1024x403.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-300x118.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-768x302.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-50x20.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-60x24.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7-100x39.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/7.png 1095w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4><strong>The Output of Modal Popup in AMP<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1349\" height=\"695\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-1024x528.png\" alt=\"\" class=\"wp-image-18299\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-1024x528.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-300x155.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-768x396.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8-100x52.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/07\/8.png 1349w\" sizes=\"(max-width: 1349px) 100vw, 1349px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will show you how to enable modal popup in AMP for this follows the below instructions. First, you need to purchase and install&nbsp;the&nbsp;Popup for AMP plugin. Here are a few simple steps to enable modal popup in AMP Download and Install the extension from the account&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[157],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18293"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=18293"}],"version-history":[{"count":7,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18293\/revisions"}],"predecessor-version":[{"id":18459,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/18293\/revisions\/18459"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=18293"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=18293"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=18293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}