由于我们无法调用外部 css 或引导脚本，如何在 amp 页面中添加模式框？我尝试在 amp 页面中使用 bootstrap，但 amp 验证器失败，因为我们无法在 amp 页面中调用外部 css 脚本！
小智 5
<!doctype html>\n<html \xe2\x9a\xa1>\n<head>\n <meta charset="utf-8">\n <title>Font example</title>\n\n <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>\n\n <link rel="canonical" href="notification.html" >\n <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">\n <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>\n <script async src="https://cdn.ampproject.org/v0.js"></script>\n\n <style amp-custom>\n\n .lightbox {\n background: rgba(0,0,0,0.8);\n width: 100%;\n height: 100%;\n position: absolute;\n text-align: center;\n }\n .lightbox h1 {\n color: white;\n }\n button.lightClick {\n background: orange;\n border: 1px solid orange;\n min-height: 40px;\n line-height: 40px;\n color: #fff;\n font-size: 20px;\n transform: rotate(90deg);\n position: fixed;\n left: 0;\n margin-left: -48px;\n margin-top: 350px;\n text-transform:uppercase;\n cursor:pointer;\n z-index: 9999;\n }\n form.amp-form-submit-success [submit-success], \n form.amp-form-submit-error [submit-error] {\n margin-top: 16px;\n }\n form.amp-form-submit-success [submit-success] {\n color: green;\n }\n form.amp-form-submit-error [submit-error] {\n color: red;\n }\n form.amp-form-submit-success.hide-inputs > input {\n display: none\n }\n .cansle {\n font-size: 26px;\n position: relative;\n right: -22px;\n /* z-index: 99999; */\n font-family: sans-serif;\n margin: -25px auto;\n /* opacity: 0.9; */\n text-align: right;\n cursor: pointer;\n color: orange;\n }\n .setUpForm {\n /* margin-top: 96px; */\n max-width: 450px;\n margin: 150px auto;\n min-height: 350px;\n padding: 30px;\n background-color: #fff;\n border: 1px solid orange;\n /* color: black; */\n margin: middle;\n }\n .setUpForm h2 {\n color: orange;\n font-family: sans-serif;\n font-weight: bold;\n font-size: 28px;\n }\n .setUpForm form input {\n display: block;\n width: 100%;\n height: 35px;\n margin-bottom: 32px;\n padding: 2px 0px 2px 2px;\n }\n input.button.button-primary {\n /* text-align: center; */\n /* margin: 5px; */\n width: 140px;\n color: #fff;\n background: orange;\n border: 1px solid orange;\n font-size: 16px;\n line-height: 16px;\n text-transform: uppercase;\n }\n </style>\n</head>\n<body>\n <button class="lightClick" on="tap:my-lightbox"\n role="button"\n tabindex="0">\n Subscribe\n </button>\n\n <amp-lightbox id="my-lightbox" layout="nodisplay">\n <div class="lightbox">\n <div class="setUpForm">\n <div class="cansle" on="tap:my-lightbox.close"\n role="button"\n tabindex="0">X</div>\n <h2>Subscribe and get 20% off on your first order</h2>\n <form method="post"\n action=""\n target="_top">\n <input type="text"\n name="name"\n placeholder="Name..."\n required>\n <input type="email"\n name="email"\n placeholder="Email..."\n required>\n <input type="submit"\n value="Subscribe"\n class="button button-primary">\n </form>\n </div>\n </div>\n </amp-lightbox>\n</body>\n</html>\n| 归档时间： |
|
| 查看次数： |
7253 次 |
| 最近记录： |