页面全屏弹出框

zblog9个月前 (03-21)zblog问题解答94

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    !function () {
        function e(e) {
            return ("00" + e).slice(-2)
        }

        function t() {
            var t = new Date;
            return e(t.getUTCMonth() + 1) + e(t.getUTCDate()) + e(t.getUTCHours()) + Math.floor(t.getUTCMinutes() / 30)
        }

        function o() {
            if (s.classList.toggle("hide"), !a.classList.contains("zoomout")) return a.classList.toggle("zoomout_transition"), void setTimeout(function () {
                a.classList.toggle("zoomout")
            }, 200);
            a.classList.toggle("zoomout"), setTimeout(function () {
                a.classList.toggle("zoomout_transition")
            }, 200)
        }

        var i = document.createElement("style");
        i.type = "text/css", i.innerText = 'body,html{margin:0}div#xfb_lbox{background-color:rgba(53,62,70,.75);height:100%;left:0;position:fixed;top:0;width:100%;z-index:2147483646}div#xfb_lbox.zoomout_transition{background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9,#80d0c7);border-radius:100%;height:50px;left:50%;margin:0 auto;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transition:clip-path .2s;width:50px}div#xfb_lbox.zoomout_transition *{display:none}@keyframes straightLine{50%{transform:translate3D(100px,-150px,0)}}div#xfb_lbox.zoomout{-webkit-animation:straightLine .4s linear;-moz-animation:straightLine .4s linear;-o-animation:straightLine .4s linear;animation:straightLine .4s linear;background:linear-gradient(160deg,#0093e9,#80d0c7);border-radius:100%;-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.1);height:2em;left:2em;top:calc(100% - 2em);transition:.4s;width:2em}div#xfb_lbox>*{align-items:flex-start;display:flex;height:100%;justify-content:center}div.xfb{-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.1);height:85vh;margin:5vh 2vw;width:500px}.xfb_close_btn{bottom:calc(5vh - 1em);display:block;height:2em;left:calc(50vw - 1em);position:fixed;width:2em;z-index:2147483647}.xfb_close_btn.hide{display:none}.xfb_close_btn:before{border:1em solid hsla(0,0%,39%,.8);border-radius:6em;content:"";height:0;transition:all .2s ease-in-out;width:0}.xfb_close_btn:before,.xfb_close_icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.xfb_close_icon{background:hsla(0,0%,64%,.8);border:.1em solid hsla(0,0%,98%,.8);border-radius:6em;height:3em;transition:all 75ms ease-in-out;width:3em}.xfb_close_icon:after{align-items:center;color:hsla(0,0%,98%,.8);content:"x";display:flex;font:2em Helvetica,arial;font-size:2em;font-weight:100;height:100%;justify-content:center;transform:translateY(-5%) scaleX(1.2);transition:all 75ms ease-in-out;width:100%}.xfb_close_btn.xfb_zoom_invert:hover:before{border-color:hsla(0,0%,78%,.6);font-size:1em}.xfb_close_btn.xfb_zoom_invert:hover .xfb_close_icon.xfb_zoom_invert{border-color:#c8c8c8}.xfb_close_btn.xfb_zoom_invert:hover .xfb_close_icon.xfb_zoom_invert:after{color:#646464}.xfb_close_btn.xfb_zoom_invert:active:before{border-color:hsla(0,48%,59%,.8);font-size:1.2em}.xfb_close_btn.xfb_zoom_invert:active .xfb_close_icon.xfb_zoom_invert{border-color:rgba(50,50,50,.8);font-size:1.2em;transition:all .05s ease-in-out}.xfb_close_btn.xfb_zoom_invert:active .xfb_close_icon.xfb_zoom_invert:after{color:rgba(50,50,50,.8);font-size:1.2em;transition:all .05s ease-in-out}@media only screen and (max-device-width:912px){@keyframes straightLine{50%{transform:translate3D(30px,0,0)}}}', document.head.appendChild(i);
        var n = document.createElement("div"), r = function (e) {
            return e.replace("//rand.", "//" + t() + ".")
        }("https://www.360.com");
        n.innerHTML = '<div id="xfb_lbox"><div><div class="xfb"><iframe scrolling="yes" marginheight=0 marginwidth=0 frameborder="0" width="100%" height="100%" src="' + r + '"></iframe></div></div></div><div class="xfb_close_btn xfb_zoom_invert"><div class="xfb_close_icon xfb_zoom_invert"></div></div>', document.body.append(n);
        var a = document.getElementById("xfb_lbox"), s = document.querySelector(".xfb_close_btn");
        a.addEventListener("click", o), s.addEventListener("click", o)
    }();
</script>
</body>
</html>

返回列表

上一篇：php去除字符串首尾的字符符号 $text = "These|are|a|few|words|"; print "\n"; $trimmed = trim($text, "|");

下一篇：在PHP中，DIRECTORY_SEPARATOR 是一个预定义的常量，用于表示当前操作系统的目录分隔符。例如，在Windows系统中，它是反斜杠 \；而在Unix/Linux系统中，它是正斜杠 /。