jq 自制弹窗弹窗相对于屏幕永远居中

最新推荐文章于 2024-11-15 14:49:42 发布

加班是不可能的，除非双倍日工资

最新推荐文章于 2024-11-15 14:49:42 发布

阅读量415

点赞数

分类专栏：弹窗前端网页文章标签： jquery html5

本文链接：https://blog.csdn.net/weixin_45591772/article/details/106057151

版权

前端网页同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

弹窗

1 篇文章 0 订阅

订阅专栏

实现效果

html部分

 <!-- 点击关闭按钮触发显示 -->
            <div class="closehit-box">
                <div style="position: relative;">
                    <div class="closehit-tit">提示</div>
                    <div class="closehit-textpartbox">
                        <h3 class="closehit-textpartbox-txt">确认关闭订单吗？</h3>
                    </div>
                    <div class="closehit-entbut"><span id="closeTheWindow">关闭</span><span class="unhide">取消</span></div>
                </div>
            </div>

jq 部分

$(function() {
                    // 点击关闭订单显示弹窗
                    $("a#shotorde").click(function() {
                        $(".closehit-box").show();
       
                    });
                    //点击确认按钮隐藏弹窗
                    $("span#closeTheWindow").click(function() {
                        $(".closehit-box").hide();
                    //在这里可进行其他操作者
                    });
                    //点击取消按钮隐藏弹窗
                    $("span.unhide").click(function() {
                        $(".closehit-box").hide();
                   //在这里可进行其他操作者
                    });
                });

样式部分

/* 提示框样式 */

.closehit-box {
    width: 400px;
    border: 1px solid #E5E5E5;
    z-index: 19991015;
    width: 420px;
    height: 240px;
    top: 113.5px;
    position: fixed;
    left: 50%;
    top: 50%;
    left: 735.5px;
    background: white;
    border-radius: 10px;
    display: none;
}

.closehit-tit {
    height: 40px;
    line-height: 41px;
    border-bottom: 1px solid #E5E5E5;
    padding-left: 30px;
}

.closehit-textpartbox {
    height: 144px;
}

.closehit-textpartbox-txt {
    height: 50px;
    line-height: 50px;
    font-size: 26px;
    text-align: center;
    padding-top: 48px;
}

.closehit-entbut {
    width: 160px;
    display: flex;
    justify-content: space-around;
    position: relative;
    right: -240px;
    top: 0;
}

.closehit-entbut span {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

#closeTheWindow {
    background: #4FA2F7;
    color: white;
    border-radius: 4px;
}

.unhide {
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
}