jQuery弹出层通用函数封装

最新推荐文章于 2024-04-03 11:51:06 发布

捕鱼麦大叔

最新推荐文章于 2024-04-03 11:51:06 发布

阅读量1.5k

点赞数 2

文章标签： jquery 弹出层 JavaScript 通用函数封装

本文链接：https://blog.csdn.net/weixin_41754739/article/details/79506784

版权

弹出层是很多网站都会用到的效果，接下来用实现弹出层函数封装：

（一）先看页面效果：

1. header 顶部导航条最右侧放登陆、注册两个链接

2.点击登陆链接时，弹出登陆窗体

3.点击右侧关闭按钮，登陆窗体关闭

4.点击注册链接时，弹出注册窗体

5.点击右侧关闭按钮，注册窗体关闭

（二）html结构（为简略，结构已省略logo、nav、登录注册等具体内容）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header> 
        <a href="#" id="loginLink">登录</a>
        <a href="#" id="regeLink">注册</a>
    </header>

    <!-- 弹出层遮罩-->
    <div class="layer-mask" id="layer-mask"></div>
    <!-- 弹出层窗体-->
    <div class="layer-pop" id="layer-pop">
        <!-- 关闭按钮 -->
        <div class="layer-close" id="layer-close">×</div>
        <!-- 内容区域 -->
        <div class="layer-content" id="layer-content"></div>
    </div>

        <!-- 登陆窗体 -->
        <div class="loginHtml" id="loginHtml" style="display: none;">
            <p style="text-align: center;color: #f00;">这是登陆窗体内容</p>
        </div>
        <!-- 注册窗体 -->
        <div class="regeHtml" id="regeHtml" style="display: none;">
            <p style="text-align: center;color: #f00;">这是注册窗体内容</p>
        </div>
</body>
</html>

（三）简单CSS样式

/*头部样式*/
header{
    width: 1200px;
    height: 80px;
    line-height: 80px;
    text-align: right;
    margin: 0 20px 0 25px;
    overflow: hidden;
    border: 1px #333 solid;
}
header a{
    margin-left: 20px;
    margin-right: 20px;
}

/*弹出层遮罩*/
.layer-mask {
    display: none;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}
/*弹出层窗体*/
.layer-pop {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 300px;
    background: #fff;
}
/*关闭按钮*/
.layer-close {
    float: right;
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #eee;
    border: 3px solid #fff;
    margin-right: -12px;
    margin-top: -12px;
}
.layer-close:hover {
    cursor: pointer;
    background: #ccc;
    color: #fff;
}

（四）jQuery脚本

$(document).ready(function($){
    
    // 登陆链接事件
    $("#loginLink").click(function(){
        //获取登陆窗体代码
        var loginHtml = $("#loginHtml").html();
        showLayer(loginHtml,500,300);
    });

     // 注册链接事件
    $("#regeLink").click(function(){
        //获取注册窗体代码
        var regeHtml = $("#regeHtml").html();
        showLayer(regeHtml,500,300);
    });

    // 封装显示弹出层函数
    function showLayer(html,width,height,closeCallback){
        $("#layer-mask").show();
        $("#layer-pop").show();
        //动态设置弹出层宽度高度
        $("#layer-pop").css({
            width: width,
            height: height
        });
        //填充弹出层窗体内容
        $("#layer-content").html(html);
        //绑定事件，调用hideLayer
        $("#layer-close").click(function(){
            hideLayer();
        });
    };

    // 封装隐藏弹出层函数
    function hideLayer(){
        $("#layer-mask").hide();
        $("#layer-pop").hide();
    };
});

捕鱼麦大叔

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery弹出层通用函数封装

弹出层是很多网站都会用到的效果，接下来用实现弹出层函数封装：（一）先看页面效果：1. header 顶部导航条最右侧放登陆、注册两个链接2.点击登陆链接时，弹出登陆窗体3.点击右侧关闭按钮，登陆窗体关闭4.点击注册链接时，弹出注册窗体5.点击右侧关闭按钮，注册窗体关闭（二）html结构（为简略，结构已省略logo、nav、登录注册等具体内容）：&lt;!DOCTYPE html&gt;&lt;h...
复制链接

扫一扫