7b2主题弹窗登录美化

小狐狸说事

发布于 2022-11-17 14:59:02

81600

代码可运行

文章被收录于专栏：小狐狸说事小狐狸说事

运行总次数：0

代码可运行

7b2主题登录弹窗美化

js代码：

有子主题就放在child.js文件中

$(function(){
/*弹窗登录效果*/
$("#login-box .login-box-content").addClass("b2-radius");
$('.login-box-content').prepend('<div class="aibk_com_login">'+
'<div class="wxlogin-sidebar">'+
'<div>'+
'<h3>小狐狸资源网</h3>'+
'<p>www.xiaohuli.vip</p>'+
'</div>'+

'</div>'+
'</div>'
);
})

如果没有子主题可以在网站根目录自己建一个dl.js文件，在主题目录footer.php文件中底的 <？php wp_footer（） ; ？> 上面填写即可

<script src="/dl.js"></script>

引入jquery

主题根目录functions.php文件中插入下方代码:

//引入登录弹窗JS
wp_enqueue_script( 'b2-jquery','//img.ahap.cn/file/ahap/jquery.min.js', array(), null , false );

jquery.min.js文件可以自己下载到服务器

css样式代码：

代码中的图片自行替换我的是375 × 500 像素

.login-box-content {
    margin-top: 0;
    width: auto;
    display: flex;
    position: relative;
    background: #fff;
    min-width: 750px;
}
.aibk_com_login {
    width: 50%;
    position: relative;
    background: url(//img.ahap.cn/file/ahap/dl.png);
    background-size: cover;
    background-position: center 0;
}
.login-box-content .login-box-top {
    width: 50%;
    padding: 30px 30px 25px;
}
.wxlogin-sidebar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100%);
}
.wxlogin-sidebar h3{
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}
.wxlogin-sidebar p{
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}
.wxlogin-sidebar>div {
    padding: 30px;
}
@media screen and (max-width: 768px){
.aibk_com_login {
    display: none;
}
.login-box-content{
 min-width: auto;
}
.login-box-content .login-box-top{
    width: 100%;
}
}

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript