░░░░░░░░░ 杂志内容页附加功能 ░░░░░░░░░

内容页弹出层

添加弹出层(页尾代码)

<!-- 内页弹出层 -->
<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>