7B2-弹窗登录框美化

作者 : 阿灿 本文共1788个字,预计阅读时间需要5分钟 发布时间: 2020-12-7 共193人阅读

引入jquery文件

B2子主题,将下方代码添加至function.php文件中

//引入jquery
    wp_enqueue_script( 'b2-jquery','//cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js', array(), null , false );

或者可以后台头部HTML标签设置的地方引入js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

子主题child.js文件内增加以下代码

$(function(){
/*追加登录弹窗效果*/
$("#login-box .login-box-content").addClass("b2-radius bar-item-desc");
$('.login-box-content').prepend('<div class="aibk_com_login">'+
'<div class="wxlogin-sidebar">'+
'<h2>感谢您加入二进制笔记!</h2>'+
'<ul>'+
'<li><i class="b2font b2-dui"></i> 我们即将上线圈子功能</li>'+
'<li><i class="b2font b2-dui"></i> 届时将为您提供一个更加完善的交流社区</li>'+
'<li><i class="b2font b2-dui"></i> 持续更新,免费资源不断更新</li>'+
'<li><i class="b2font b2-dui"></i> 未来我们会为您提供更多精彩</li>'+
'</ul>'+
'</div>'+
'</div>');
})

子主题css文件增加以下代码

/*登录弹窗样式*/
@media (min-width: 768px){
    .login-box-content{  
        background-image: url(https://static.2binarys.com/wp-content/uploads/2020/11/1e1c8e5415e795.png);
        background-position: 146px bottom;
        background-repeat: no-repeat;}
     .modal-content{width:800px}
    .aibk_com_login {width: 400px;
        height:auto;
        float: left;
       }   
    .login-box-content .login-box-top{    width: 400px;
        float: left;}    
    .aibk_com_login .wxlogin-sidebar{
         padding: 50px 50px 0;}
    .aibk_com_login .wxlogin-sidebar h2 {
        font-size: 22px;
        margin-bottom: 30px;
        color:#fff;
    }    
    .aibk_com_login .wxlogin-sidebar ul li{
         display: block;
        margin-bottom: 10px;
        font-size: 15px;
        color:#fff;
    }  
    p.module-desc {
        border-left: 0px solid #fb5f3c;
        padding-left: 0px;
    }
    .aibk_com_login .wxlogin-sidebar ul li i{
        margin-right: 10px;
        opacity: .52;
        position: relative;
        top:2px;
    }
    .login-title span{padding:10px 10px;font-size:16px;color:#252525;}
    .login-title span b{color:#252525;}
    .login-box-content .login-box-top{padding:36px 24px}
    .header .ri-medal-line{    color: #ffd2ab;
        font-size: 18px;
        position: relative;
        top: 3px;
        margin-right: 3px;}
}
@media (max-width: 768px) {
  .aibk_com_login {
  	display:none
  }
}
/*登录弹窗样式结束*/
爱搜社,一个专注收集和分享网络源码资源的网站,建站辅导首选爱搜社
爱搜社 » 7B2-弹窗登录框美化

常见问题FAQ

如何通过本站投稿资源与作品?
本站为开放式资源共享平台,用户可通过后台或者联系站长进行发稿,同时可设置为收费作品,平台将收取百分之十的手续费,作品不得发布违禁,违法内容与广告,如被查出有关于黄赌毒等违法内容,平台将永久封禁帐号,并配合公安机关提供用户信息!
下载后的资源如何使用?
本站所有资源来源于网络,资源的使用一般附带在文章中,如果依旧不会使用 请联系作者或者寻求度娘帮助
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源均来自互联网仅供学习,版权属于原作者所有!本站所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。如有侵权请联系Email:85136926@qq.com 并附上相关证明 24小时内给予删除!