说明

实现效果

关键点

显示对话框

• 显示对话框时，x 坐标需要通过浏览器窗口宽度计算得出，算法：(浏览器窗口宽度 - div宽度)/2

遮罩层

其作用就是盖住其他区域，让对话框以外的部分不能点击：

• 遮罩层要盖住整个窗口，所以要获取当前窗口的大小

改变窗口大小时

• 改变窗口大小时，对话框仍要水平居中，需要添加窗口的 resize 事件，改变窗口大小时，重新计算对话框的 x 坐标

• 改变窗口大小时，遮罩层仍然能够盖住整个区域，需要添加窗口的 resize 事件，改变窗口大小时，重新计算遮罩层的宽度、高度

html

<button id="btn">作业</button>

<div id="homeword_dialog">
    <div class="wrap">
        <div class="title_wrap">
            <div class="title">添加作业</div>
            <a href="javascript:void(0)" id="close">X</a>
        </div>
        <div>
            <div>作业名称：<input type="text"></div>
            <div>作业对象：<input type="radio">全员作业  <input type="radio">分组作业</div>
            <div>
                <button>取消</button>
                <button>下一步</button>
            </div>
        </div>
    </div>
</div>
<div id="mask"></div>

css

<style>
    #homeword_dialog{
        background-color: #fff;
        width: 800px;
        height: 150px;
        margin: 0 auto;
        position: absolute;
        top:50px;
        z-index: 10000;
        border-radius: 10px;
        display: none;
    }
    #mask{
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        z-index: 100;
    }
    .title_wrap{
        margin-bottom: 10px;
    }
    .wrap{
        margin: 10px 50px;
    }
    #close{
        position: absolute;
        top: 10px;
        right: 20px;
    }
    a{
        color: #333;
        text-decoration: none;
    }
    a:hover{
        color: rgba(29, 101, 202, 0.812);
    }
</style>

js

<script>
    $(document).ready(function(){
        // 不能使用哪个jq让其隐藏，会闪烁，用css控制
        // $("#homeword_dialog").hide()

        $("#btn").click(function(){
            // 让 homeword_dialog 显示
            const x = ($(window).width() - $("#homeword_dialog").width())/2
            console.log("x:",x)
            $("#homeword_dialog").css("left",x)
            $("#homeword_dialog").show()

            // 让遮罩层显示
            $("#mask").css("height",$(window).height())
            $("#mask").css("width", $(window).width() )
            $("#mask").show()

        })
        // 改变窗口大小事，触发该事件
        $(window).resize(function(e){
            console.log("e:",e)
            // 重新计算 homeword_dialog 显示的x坐标
            const x = ($(window).width() - $("#homeword_dialog").width())/2
            console.log("x:",x)
            $("#homeword_dialog").css("left",x)

            // 改变窗口时，重新计算 遮罩层的高度、宽度
            $("#mask").css("height",$(window).height())
            $("#mask").css("width", $(window).width() )
        })

        $("#close").click(function(){
            // 让 homeword_dialog 隐藏
            $("#homeword_dialog").hide()
            // 让遮罩隐藏
            $("#mask").hide()

        })
    })
</script>