添加弹出层(页尾代码)
<!-- 内页弹出层 --> <section id="popLayer"> <style type="text/css"> #pageInfo {filter:blur(3px); transition: all ease 0s !important;} #popLayer, #popLayer * {transition: all ease .5s !important;} #popLayer {position:fixed;z-index:99999;pointer-events:none;width:100%;height:100%;padding:20px 20px 35px 20px ;background:rgba(255,255,255,.5);} #popLayer #popContent {position:revert;pointer-events:auto;width:100%;height:100%;background:rgba(255,255,255,.95);border-radius:20px;} #popLayer #popContent #popClose{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:100%;border:2px solid rgba(0,0,0,.08);box-shadow:0 0 10px rgba(0,0,0,.1);background:#fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi4wOSAyMi4wOSIgc3R5bGU9Im9wYWNpdHk6IDAuNiI+PHBhdGggZD0iTTIxLjY1LDE5LjUzLDEzLjE3LDExbDguNDgtOC40OGExLjUxLDEuNTEsMCwwLDAsMC0yLjEyLDEuNDksMS40OSwwLDAsMC0yLjEyLDBMMTEsOC45MiwyLjU2LjQ0QTEuNSwxLjUsMCwwLDAsLjQ0LDIuNTZMOC45MiwxMSwuNDQsMTkuNTNhMS40OSwxLjQ5LDAsMCwwLDAsMi4xMiwxLjUxLDEuNTEsMCwwLDAsMi4xMiwwTDExLDEzLjE3bDguNDksOC40OGExLjUsMS41LDAsMCwwLDIuMTItMi4xMloiLz4NCjwvc3ZnPg0K) no-repeat center/50%;} body.popLayerNone #pageInfo {filter: blur(0px);} body.popLayerNone #popLayer {background:rgba(0,0,0,0);} body.popLayerNone #popLayer #popContent{pointer-events:none;transform:scale(1.35);opacity:0;} </style> <div id="popContent"> <iframe src="2.html" style="width:100%;height:100%;border-radius:20px;overflow:hidden;border:3px solid rgba(255,255,255,.1);box-shadow:0 0 10px rgba(0,0,0,.2);" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" allowtransparency="true"></iframe> <div id="popClose" onclick='$("body").addClass("popLayerNone");'> </div> </div> </section>
弹出层内容【2.html】(编辑器)
<section style="width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.6);"> <div style="width: 100%; height: 100%; overflow: auto; background: rgba(255, 255, 255, 0);animation:textShow 2s ease 0s 1 both;"> <style type="text/css"> @keyframes textShow {0%{transform: scale(.01);} 100%{transform: scale(1.0);}}</style> <section class="graFromTop" style="animation-delay: 0s; animation-duration: 5s; width:100%;height:100%;padding: 2em; overflow: hidden;"> <div style="width:100%;height:100%;overflow:auto;"> <p text-align: center;">春来,</p> <p text-align: center;">万物复苏,草飞莺长,</p> <p text-align: center;">三十五年前的胜狮踏着春风,</p> <p text-align: center;">播撒希望的种子。</p> </div> </section> </div> </section>