jQuery实现简单的模态框

<!-- jquery模态框 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*隐藏*/
        .hide{
            display:none;
        }

        /*弹出的模态框的样式*/
        .modal{
            position:fixed;
            left:50%;
            top:50%;
            width:500px;
            height:400px;
            margin-left:-200px;
            margin-top:-250px;
            z-index:10;
            background-color:white;
        }

        /*阴影区域的样式*/
        .shade{
            position:fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            opacity:0.6;
            background-color:black;
            z-index:9;
        }
        p{
            text-align:center;
        }
    </style>
</head>
<body>
    <input type="button" value="添加">


    <!-- 弹出的模态框的内容，默认隐藏模态框区域 -->
    <div class="modal hide">
        <p>地址：<input type="text"></p>
        <p>端口：<input type="text"></p>
        <p><input type="button" value="取消"></p>
    </div>

    <!-- 弹出模态框时，伴随的阴影部分区域，默认隐藏阴影区域 -->
    <div class="shade hide"></div>

    <div class="container">
        <table border="1">
            <tr>
                <td>1.1.1.1</td>
                <td>80</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
            <tr>
                <td>1.1.1.2</td>
                <td>81</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
            <tr>
                <td>1.1.1.3</td>
                <td>82</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
            <tr>
                <td>1.1.1.4</td>
                <td>83</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
        </table>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>

        //添加按钮事件
        $(\'input[value="添加"]\').click(function(){
            //将.modal和.shade展示出来
            $(\'.hide\').removeClass(\'hide\');    
        });

        //取消按钮事件
        $(\'input[value="取消"]\').click(function(){
            $(\'input[type="text"]\').val(\'\');
            //将.modal和.shade隐藏起来
            $(\'.modal,.shade\').addClass(\'hide\');
        });

        //编辑按钮事件
        $(\'input[value="编辑"]\').click(function(){
            $(\'.hide\').removeClass(\'hide\');
            var tds = $(this).parent().prevAll();
            //jquery对象加上索引是dom对象
            $($(\'.modal input\')[0]).val($(tds[1]).text());
            $($(\'.modal input\')[1]).val($(tds[0]).text());
        });

        //删除按钮事件
        $(\'input[value="删除"]\').click(function(){
            //删除对应的<tr></tr>标签
            $(this).parent().parent().remove();
        });

    </script>

</body>
</html>

知识点：

$(\'input[type="text"]\')  ————》》》选择type="text"的input标签。