jQuery实现简单的模态框

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!-- 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>