网页嵌入外部页面框架展示js弹窗框架一个非常不错的UI弹出框架

小辉工作室 2021-7-26 15:05 JS网页代码
一款轻便的js弹窗插件,如果自定义弹出层HTML框架，网页中嵌入外部页面框架展示，非常不错的
自行提取里面代码，添加到自己网站吧！
代码如下：
<!--小辉网 www.8gws.com-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>网站演示页面</title>
<script src="https://www.layuicdn.com/layui/layui.js"></script><!--代码复制到你的网站-->
<style>
html, body {
  background: #28254C;
  font-family: 'Ubuntu';
}

* {
  box-sizing: border-box;
}

.box {
  width: 350px;
  height: 100%;
  max-height: 600px;
  min-height: 450px;
  background: #332F63;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px 50px;
}
.box .box__ghost {
  padding: 15px 25px 25px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
}
.box .box__ghost .symbol:nth-child(1) {
  opacity: .2;
  animation: shine 4s ease-in-out 3s infinite;
}
.box .box__ghost .symbol:nth-child(1):before, .box .box__ghost .symbol:nth-child(1):after {
  content: '';
  width: 12px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  bottom: 65px;
  left: 0;
}
.box .box__ghost .symbol:nth-child(1):before {
  transform: rotate(45deg);
}
.box .box__ghost .symbol:nth-child(1):after {
  transform: rotate(-45deg);
}
.box .box__ghost .symbol:nth-child(2) {
  position: absolute;
  left: -5px;
  top: 30px;
  height: 18px;
  width: 18px;
  border: 4px solid;
  border-radius: 50%;
  border-color: #fff;
  opacity: .2;
  animation: shine 4s ease-in-out 1.3s infinite;
}
.box .box__ghost .symbol:nth-child(3) {
  opacity: .2;
  animation: shine 3s ease-in-out .5s infinite;
}
.box .box__ghost .symbol:nth-child(3):before, .box .box__ghost .symbol:nth-child(3):after {
  content: '';
  width: 12px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  top: 5px;
  left: 40px;
}
.box .box__ghost .symbol:nth-child(3):before {
  transform: rotate(90deg);
}
.box .box__ghost .symbol:nth-child(3):after {
  transform: rotate(180deg);
}
.box .box__ghost .symbol:nth-child(4) {
  opacity: .2;
  animation: shine 6s ease-in-out 1.6s infinite;
}
.box .box__ghost .symbol:nth-child(4):before, .box .box__ghost .symbol:nth-child(4):after {
  content: '';
  width: 15px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  top: 10px;
  right: 30px;
}
.box .box__ghost .symbol:nth-child(4):before {
  transform: rotate(45deg);
}
.box .box__ghost .symbol:nth-child(4):after {
  transform: rotate(-45deg);
}
.box .box__ghost .symbol:nth-child(5) {
  position: absolute;
  right: 5px;
  top: 40px;
  height: 12px;
  width: 12px;
  border: 3px solid;
  border-radius: 50%;
  border-color: #fff;
  opacity: .2;
  animation: shine 1.7s ease-in-out 7s infinite;
}
.box .box__ghost .symbol:nth-child(6) {
  opacity: .2;
  animation: shine 2s ease-in-out 6s infinite;
}
.box .box__ghost .symbol:nth-child(6):before, .box .box__ghost .symbol:nth-child(6):after {
  content: '';
  width: 15px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  bottom: 65px;
  right: -5px;
}
.box .box__ghost .symbol:nth-child(6):before {
  transform: rotate(90deg);
}
.box .box__ghost .symbol:nth-child(6):after {
  transform: rotate(180deg);
}
.box .box__ghost .box__ghost-container {
  background: #fff;
  width: 100px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  position: relative;
  margin: 0 auto;
  animation: upndown 3s ease-in-out infinite;
}
.box .box__ghost .box__ghost-container .box__ghost-eyes {
  position: absolute;
  left: 50%;
  top: 45%;
  height: 12px;
  width: 70px;
}
.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
  width: 12px;
  height: 12px;
  background: #332F63;
  border-radius: 50%;
  margin: 0 10px;
  position: absolute;
  left: 0;
}
.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
  width: 12px;
  height: 12px;
  background: #332F63;
  border-radius: 50%;
  margin: 0 10px;
  position: absolute;
  right: 0;
}
.box .box__ghost .box__ghost-container .box__ghost-bottom {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.box .box__ghost .box__ghost-container .box__ghost-bottom div {
  flex-grow: 1;
  position: relative;
  top: -10px;
  height: 20px;
  border-radius: 100%;
  background-color: #fff;
}
.box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
  top: -12px;
  margin: 0 -0px;
  border-top: 15px solid #332F63;
  background: transparent;
}
.box .box__ghost .box__ghost-shadow {
  height: 20px;
  box-shadow: 0 50px 15px 5px #3B3769;
  border-radius: 50%;
  margin: 0 auto;
  animation: smallnbig 3s ease-in-out infinite;
}
.box .box__description {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.box .box__description .box__description-container {
  color: #fff;
  text-align: center;
  width: 200px;
  font-size: 16px;
  margin: 0 auto;
}
.box .box__description .box__description-container .box__description-title {
  font-size: 24px;
  letter-spacing: .5px;
}
.box .box__description .box__description-container .box__description-text {
  color: #8C8AA7;
  line-height: 20px;
  margin-top: 20px;
}
.box .box__description .box__button {
  display: block;
  position: relative;
  background: #FF5E65;
  border: 1px solid transparent;
  border-radius: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
  padding: 0 70px;
  white-space: nowrap;
  margin-top: 25px;
  transition: background .5s ease;
  overflow: hidden;
}
.box .box__description .box__button:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 100px;
  background: #fff;
  bottom: -25px;
  left: 0;
  border: 2px solid #fff;
  transform: translateX(-50px) rotate(45deg);
  transition: transform .5s ease;
}
.box .box__description .box__button:hover {
  background: transparent;
  border-color: #fff;
}
.box .box__description .box__button:hover:before {
  transform: translateX(250px) rotate(45deg);
}

@keyframes upndown {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes smallnbig {
  0% {
    width: 90px;
  }
  50% {
    width: 100px;
  }
  100% {
    width: 90px;
  }
}
@keyframes shine {
  0% {
    opacity: .2;
  }
  25% {
    opacity: .1;
  }
  50% {
    opacity: .2;
  }
  100% {
    opacity: .2;
  }
}
</style>
</head>
<body>
<div class="box">
  <div class="box__ghost">
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    
    <div class="box__ghost-container">
      <div class="box__ghost-eyes">
        <div class="box__eye-left"></div>
        <div class="box__eye-right"></div>
      </div>
      <div class="box__ghost-bottom">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="box__ghost-shadow"></div>
  </div>
  
  <div class="box__description">
    <div class="box__description-container">
      <div class="box__description-title">演示页面！</div>
      <div class="box__description-text">客服QQ：3131282664</div>
    </div>
    <!--下面代码复制到你的网站-->	
    <a class="box__button" onclick="SGKMsg('<b>小辉资源网<br>免费提供大家使用</b> [网址]<xt>www.8gws.com</xt><br><ps><b>PS：</b>如果您需要更多资源，请百度<br>小辉网络工作室（免费下载）</ps>');" class="widget" style="background:#0000 !important;" target="_blank">点击查看</a>
    <!--上面代码复制到你的网站-->	
  </div>
  
</div>
<!--下面代码复制到你的网站-->	
<script>
/*--提示信息--------FanMatter*/
"use strict";
cocoMessage.config({
    duration: 3000,
});
/*--设置提示--------FanMatter*/
setInterval(function(){ 
    $("#main-body").css("display","");
    $("#js-warn").css("display","none");
    mytime();
},100);

function ToBottom()
{
    $('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);

}
function NumDynamic(ID,speed,value)
{
	var jqid = "#"+ID;
	if(value>0)
	{
		var num = $(jqid).html();
	    var t = setInterval(function()
	    {
	        if(num>=value)
	        {
	           	clearInterval(t);
	           	return;
	        }
	        num++;
            $(jqid).html(num);       
	    },speed);
	}
	else
	{
		//EditArea.html(value);
		console.log("UNCHANGED.");
	}
};

function LoadTime() 
{
    var LoadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
    var ms2m = LoadTime / 1000;
    $("#LoadTime").html(ms2m.toFixed(3));
    //console.log(LoadTime / 1000);
}

function LoadA()
{
    //alert("1");
    $("body").css("overflow-y","hidden");
    console.log("Loading");
    $(this).attr("disabled", true);
    $("#wannet-loading").css("display","");
    $(".center-block").css("filter","blur(20px)");
}
function LoadButton()
{
    //alert("1");
    console.log("Loading");
    $(this).attr("disabled", true);
    $("#wannet-loading").css("display","");
    //$('form').submit();
    $(".center-block").css("filter","blur(20px)");
    setTimeout(function() 
    {
        //$('form').submit();
        console.log("Forming");
        setTimeout(function() 
        {
            //$('form').submit();
            console.log("Forming");
            setTimeout(function() 
            {
                //$('form').submit();
                console.log("Forming");
            },9000);
        },6000);
    },3000);
}
function FrameWindow(wid,hei,tit,url)
{
    layui.use('layer', function()
    {
        var layer = layui.layer;
        layer.open({
            type: 2,
            title: tit,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: [wid, hei],
            content: url
        });
    }); 
}
function Download(tit,url)
{
    layui.use('layer', function()
    {
        var layer = layui.layer;
        layer.open({
            type: 2,
            title: tit,
            time: 1000,
            resize: false,
            shadeClose: true,
            shade: false,
            area: [320, 180],
            content: url
        });
    }); 
}
function SGKMsg(msg)
{
    /*
    layui.use('layer', function(){
        var layer = layui.layer;
        layer.msg(msg);
    }); 
    */
    layer.open({
        content: msg,
        title: '温馨提示',
        btn: ['点击进入','8gws.com'],
        btn2:  function()
        {
            $(window).attr('location','http://www.8gws.com');
        },
        yes: function()
        {
            FrameWindow('95%','90%','小辉资源网','http://bbs.8gws.com/');
            var index = layer.open();
            layer.close(index);
        },
        cancel: function()
        { 
            //close
        }
    });
}
/*--执行区域--------FanMatter*/
$(function()
{
    $("#wannet-loader").fadeOut(700);
    LoadTime();
    var ADAble = $.cookie('ADAble');
    if(ADAble == "false")
    {
        $("GGBlock").remove();
    }
    var Notice = $.cookie('Notice');
    if(Notice == "true")
    {
        layer.closeAll();
    }
    $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});
    $("a[target!='_blank']").click(function(){
        var test_layui = $(this).attr("class");
        var test_href = $(this).attr("href");
        if(test_layui == undefined){var test_layui = "NO_CLASS";}
        if(test_href == undefined){var test_href = "NO_HREF";}
        console.log(test_href);
        if(test_layui.indexOf("layui") == "-1")
        {
            if(test_href.indexOf("/") != "-1" || test_href.indexOf(".") != "-1" && test_layui.indexOf("NOJS") == "-1")
            {
                LoadA();
            }
        }
    });
    $("button").click(function(){
        var test_captcha = $(this).attr("class");
        if(test_captcha.indexOf("captcha") == "-1" && test_captcha.indexOf("NOJS") == "-1" )
        {
            LoadButton();
        }
    });
});
</script>
<!--以上代码复制到你的网站-->
</div>
</body>
</html>
Plugins by frpkj.com
下载地址：
文件名称：网页嵌入外部页面框架展示js弹窗框架一个非常不错的UI弹出框架
文件大小：94KB适用版本：PC
更新日期：2021-07-26作者信息：小辉网络
点击下载 查看演示
温馨提示：如有转载或引用以上内容请将本文链接作为出处标注！百度已收录
免责声明：本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版，购买注册，得到更好的正版服务。侵删请致信E-mail：431228450@qq.com
标签暂无标签
资源分享
评论列表