jquery案例：div对话框-马育民老师

# 说明

### 实现效果

[![](/upload/0/0/1IX6AnNwFM5H.jpg)](/upload/0/0/1IX6AnNwFM5H.jpg)

# 关键点

### 显示对话框

- 显示对话框时，`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>
```

原文出处：https://malaoshi.top/show_1IX6AnXJMqRF.html