如何在AMP页面中添加模态? [英] How to add modal in AMP page?
本文介绍了如何在AMP页面中添加模态?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
由于无法调用外部CSS或引导脚本，我们如何在功放页面中添加模式框?我曾尝试在amp页面中使用引导程序，但amp验证程序失败了，因为我们无法在amp页面中调用外部CSS脚本！
How can we add modal boxes in amp pages since we cannot call external css or bootstrap scripts? i have tried using bootstrap in amp pages but amp validators fails it since we cannot call external css scripts in amp pages!
推荐答案
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Font example</title>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<link rel="canonical" href="notification.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.lightbox {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
.lightbox h1 {
color: white;
}
button.lightClick {
background: orange;
border: 1px solid orange;
min-height: 40px;
line-height: 40px;
color: #fff;
font-size: 20px;
transform: rotate(90deg);
position: fixed;
left: 0;
margin-left: -48px;
margin-top: 350px;
text-transform:uppercase;
cursor:pointer;
z-index: 9999;
}
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error] {
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: green;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none
}
.cansle {
font-size: 26px;
position: relative;
right: -22px;
/* z-index: 99999; */
font-family: sans-serif;
margin: -25px auto;
/* opacity: 0.9; */
text-align: right;
cursor: pointer;
color: orange;
}
.setUpForm {
/* margin-top: 96px; */
max-width: 450px;
margin: 150px auto;
min-height: 350px;
padding: 30px;
background-color: #fff;
border: 1px solid orange;
/* color: black; */
margin: middle;
}
.setUpForm h2 {
color: orange;
font-family: sans-serif;
font-weight: bold;
font-size: 28px;
}
.setUpForm form input {
display: block;
width: 100%;
height: 35px;
margin-bottom: 32px;
padding: 2px 0px 2px 2px;
}
input.button.button-primary {
/* text-align: center; */
/* margin: 5px; */
width: 140px;
color: #fff;
background: orange;
border: 1px solid orange;
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
}
</style>
</head>
<body>
<button class="lightClick" on="tap:my-lightbox"
role="button"
tabindex="0">
Subscribe
</button>
<amp-lightbox id="my-lightbox" layout="nodisplay">
<div class="lightbox">
<div class="setUpForm">
<div class="cansle" on="tap:my-lightbox.close"
role="button"
tabindex="0">X</div>
<h2>Subscribe and get 20% off on your first order</h2>
<form method="post"
action=""
target="_top">
<input type="text"
name="name"
placeholder="Name..."
required>
<input type="email"
name="email"
placeholder="Email..."
required>
<input type="submit"
value="Subscribe"
class="button button-primary">
</form>
</div>
</div>
</amp-lightbox>
</body>
</html>
这篇关于如何在AMP页面中添加模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
