首页 > 代码库 > jq弹框--升级版

jq弹框--升级版

2024-09-14 14:58:43   217人阅读

技术分享 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/1.css"/>
    <title></title>

</head>
<body>
<div class="add-deploy">点击</div>
<div class="layer-bg"></div>
<div class="layer-con">
    <div class="layer-main layer-outer">
        <h5 class="tc">标题</h5>
        <div class="layer-content">222</div>
        <div class="close">x</div>
    </div>
</div>
<div class="cc"></div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/1.js"></script>
</html>
html
技术分享 
.layer-bg {
    display: none;
    width: 100%;
    z-index: 99;
    position: fixed;
    background-color: #000;
    opacity: 0.3;
    top:0;
    height:100%;
    filter: alpha(opacity=30);
}

.layer-con {
    display: none;
    background-color: #fff;
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
    opacity: 1;
    filter: alpha(opacity=100);
}

.close {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 36px;
    color: #8a8888;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 6px;
    top: 4px;
    cursor: pointer;
}

.layer-con h5 {
    width:90%;
    height: 42px;
    padding-left: 16px;
    line-height: 42px;
    margin: 0 auto 10px;
    font-size: 22px;
    color: #ab2223;
    border-bottom:1px solid #ab2223;
    font-weight: normal;
    text-align:center;
}
.layer-main{
    padding-bottom: 20px;
}
.layer-outer{
    width: 320px;
}

.layer-content {
    padding-top: 46px;
    overflow-y: auto
}
1.css
技术分享 
$(function() {
    /*删除--弹框--开始*/
    $(".add-deploy").on("click",function(){
        layer($(this));
    });
    function layer(small){
        var $con=$(".layer-con"),$conH=$con.height(),$main=parseFloat($con.find(".layer-main").css("width"));
        $(".layer-bg").css({"display":"block"});
        $con.css({"display":"block","margin-top":-$conH/2,"margin-left":-$main/2});
    }
    $(".close,.layer-cancel").on("click",function(){
        $(this).parents(".layer-con").css("display","none");
        $(".layer-bg").css("display","none");
    });
    /*删除--弹框--结束*/
});
1.js

说明：只需要给layer-main新增class 然后给该class设置宽度，js来通过layer-main的宽度值设置layer-con的margin-left值，如果项目中需要用一套弹框  则只需要替换layer-con中的内容

jq弹框--升级版


联系
我们