遮挡层显示相关问题

最新推荐文章于 2019-05-27 17:40:48 发布
包淼淼
最新推荐文章于 2019-05-27 17:40:48 发布
阅读量211
点赞数
本文链接：https://blog.csdn.net/qq_32849999/article/details/80095281
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 410px;
            margin: 100px auto 0;
        }

        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        th,td{
            border: 1px solid #d0d0d0;
        }
        #j_hideFormAdd{
            float: right;
        }
        #j_txtLesson,#j_txtBelSch{
            width: 200px;
        }
        .form-submit{
            margin: 10px 150px;
        }
        /*以下是遮挡层相关显示css，此处遮挡层和在遮挡层上面的那个div的position都要设置为absolute，目的是达到脱标的效果，*/
          /*  并且遮挡层的宽和高都要设置为100%，display为none，使其先隐藏。并且在遮挡层上面的div的z-index比遮挡层的还要大，才能保证其在遮挡层上面*/
        #j_formAdd{
            display: none;
            z-index: 11;
            position: absolute;
           left:30%;
            width: 344px;
            border: 1px solid #c0c0c0;
            background-color: antiquewhite;
        }
        #j_mask{
            width:100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.5);
            z-index:10;
            display: none;
        }

    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //显示对话框
            $("#j_btnAddData").click(function () {
                $("#j_mask").show();//显示遮挡层
                $("#j_formAdd").show();//显示对话框

            });
            function close(){
                $("#j_mask").hide();//隐藏遮挡层
                $("#j_formAdd").hide();//隐藏对话框

            }
            //点击X点击关闭对话框
            $("#j_hideFormAdd").click(function () {
                close();
            });

            //添加数据的案例
            $("#j_btnAdd").click(function () {
                //先获取课程的文本框对象
                var j_txtLesson=$("#j_txtLesson");
                //获取学院文本框的对象
                var j_txtBelSch=$("#j_txtBelSch");
                //创建行和列并直接加入到tbody中
                $("<tr><td>"+j_txtLesson.val()+"</td><td>"+j_txtBelSch.val()+"</td><td><a href='javascrip:;' class='get'>GET</a></td></tr>").appendTo($("#j_tb"));
                //关闭对话框
                close();
                //清空课程的文本框
                j_txtLesson.val("");
                j_txtBelSch.val("传智播客-前端与移动开发学院");
            });

            //页面加载后就为a注册点击事件，使用的是on的方式
            $("#j_tb").on("click",".get",function () {
                //this指的是a超链接
                $(this).parent().parent().remove();
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
    </div>
    <table>
        <thead style="background-color: dodgerblue">
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>

        </tbody>
    </table>

</div>
<div id="j_mask" class="mask" ></div> <!--遮挡的div-->
<div id="j_formAdd" class="form-add" >
    <div class="form-add-title" style="background-color: dodgerblue">
        <span>添加数据</span>
        <div id="j_hideFormAdd">X</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input type="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">所属学院：</label>
        <input type="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>

</body>
</html>