给网站嵌入一个公益图床

20231009090531605-image-12
20231009090548231-image-13

自定义javascript代码

imgurl_domain = 'https://tuchuang.org.cn/';
//定义一个全局弹出层
window.layerstart = '<div id = "layer" class="box-body modal-content" style = "background-color: var(--main-bg-color);top: 1em;left: 10%;width: 80%;position: fixed;z-index: 999;"><p>欢迎使用公益图床</p>';
layerstart += '<div style="text-align:right;padding:0.8em;border-bottom:1px solid #d2d2d2;"><a href="javascript:;" rel="external nofollow" onclick="closelayer()""><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><svg class="ic-close" viewBox="0 0 1024 1024"><path d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"></path></svg></button></a></div>';
window.layerend = '</div>';

//让层居中显示
window.layerCenter = function(){
    var bwidth = window.screen.availWidth;
    var bheight = window.screen.availHeight;
    var layertop = (bheight - 720) / 2;
    var layerleft = (bwidth - 1280) / 2;

    if(layertop <= 70){
        layertop = "1em";
    }
    else{
        layertop = layertop + "px";
    }

    //改变css
    //$("#layer").css({"top":layertop,"left":layerleft});
    //原生js改变css
    //alert(layertop);
    document.getElementById("layer").style.top = layertop;
    document.getElementById("layer").style.left = "10%";
}
//创建一个遮罩层
window.keepout = function(){
    var fade = '<div id = "fade" style = "width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 0;z-index: 99;" onclick = "closelayer()"></div>';
    //$("body").append(fade);
    var div = document.createElement("div");
    div.innerHTML = fade;
    document.body.appendChild(div);
}

//关闭层
window.closelayer = function(){
    //$("#layer").hide();
    document.getElementById("layer").style.display = "none";
    //showSidebar();
    //$("#layer").remove();
    var layer = document.getElementById("layer");
    layer.parentNode.removeChild(layer);

    //$("#fade").remove();
    var fade = document.getElementById("fade");
    fade.parentNode.removeChild(fade);
}

//创建一个显示按钮
function imgurl(){
    //$("body").append('<div id = "imgbtn" style = "position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick = "showImgurl()"><img src = "https://tuchuang.org.cn/static/images/tuchuang.png" width = "50px" height = "50px" /></div>');
    //使用原生js添加按钮
    var div = document.createElement("div");
    div.innerHTML = '<div id = "imgbtn" style = "position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick = "showImgurl()"><img src = "https://tuchuang.org.cn/static/images/tuchuang.png" width = "50px" height = "50px" /></div>';
    document.body.appendChild(div);
}
//显示上传按钮
window.showImgurl = function(){
    var up = layerstart;
    up += '<iframe src = "' + imgurl_domain + '" width="100%" height="660px" frameborder="0"></iframe>';
    up += layerend;
    //$("body").append(up);
    var div = document.createElement("div");
    div.innerHTML = up;
    document.body.appendChild(div);

    //$("#layer").show();
    document.getElementById("layer").style.display = "block";

    //显示遮罩
    keepout();
    //居中显示层
    layerCenter();
}

imgurl();

其他主题版本

imgurl_domain = 'https://tuchuang.org.cn/';
//定义一个全局弹出层
window.layerstart = '<div id = "layer" style = "box-shadow: 1px 1px 2px #888888;border-radius:5px;top:0em;left:0;width:80%;height:720px;background-color:#FFFFFF;position:fixed;z-index:999;display:none;border:1px solid #d2d2d2">';
layerstart += '<div style="text-align:right;padding:0.8em;border-bottom:1px solid #d2d2d2;"><a href="javascript:;" rel="external nofollow" target = "_blank"  onclick="closelayer()" style="color:#FFFFFF;background-color:#FF5722;width:80px;text-align:center;padding:0.5em;border-radius:2px;padding-left:1em;padding-right:1em;">关闭</a></div>';
window.layerend = '</div>';

//让层居中显示
window.layerCenter = function(){
    var bwidth = window.screen.availWidth;
    var bheight = window.screen.availHeight;
    var layertop = (bheight - 720) / 2;
    var layerleft = (bwidth - 1280) / 2;

    if(layertop <= 70){
        layertop = "1em";
    }
    else{
        layertop = layertop + "px";
    }

    //改变css
    //$("#layer").css({"top":layertop,"left":layerleft});
    //原生js改变css
    //alert(layertop);
    document.getElementById("layer").style.top = layertop;
    document.getElementById("layer").style.left = "10%";
}
//创建一个遮罩层
window.keepout = function(){
    var fade = '<div id = "fade" style = "width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 0;z-index: 99;" onclick = "closelayer()"></div>';
    //$("body").append(fade);
    var div = document.createElement("div");
    div.innerHTML = fade;
    document.body.appendChild(div);
}

//关闭层
window.closelayer = function(){
    //$("#layer").hide();
    document.getElementById("layer").style.display = "none";
    //showSidebar();
    //$("#layer").remove();
    var layer = document.getElementById("layer");
    layer.parentNode.removeChild(layer);

    //$("#fade").remove();
    var fade = document.getElementById("fade");
    fade.parentNode.removeChild(fade);
}

//创建一个显示按钮
function imgurl(){
    //$("body").append('<div id = "imgbtn" style = "position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick = "showImgurl()"><img src = "https://tuchuang.org.cn/static/images/tuchuang.png" width = "50px" height = "50px" /></div>');
    //使用原生js添加按钮
    var div = document.createElement("div");
    div.innerHTML = '<div id = "imgbtn" style = "position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick = "showImgurl()"><img src = "https://tuchuang.org.cn/static/images/tuchuang.png" width = "50px" height = "50px" /></div>';
    document.body.appendChild(div);
}
//显示上传按钮
window.showImgurl = function(){
    var up = layerstart;
    up += '<iframe src = "' + imgurl_domain + '" width="100%" height="660px" frameborder="0"></iframe>';
    up += layerend;
    //$("body").append(up);
    var div = document.createElement("div");
    div.innerHTML = up;
    document.body.appendChild(div);

    //$("#layer").show();
    document.getElementById("layer").style.display = "block";

    //显示遮罩
    keepout();
    //居中显示层
    layerCenter();
}

imgurl();

如果你需要在后台嵌入使用请下载后台美化插件,自定义后台js即可

© 版权声明
THE END
点赞12赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容