JQuery 模态对话框

最新推荐文章于 2022-10-31 19:06:39 发布

simon5169

最新推荐文章于 2022-10-31 19:06:39 发布

阅读量517

点赞数 1

分类专栏：前端文章标签： model jquery

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery 模态

<!-- jquery模态框可扩展版本 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <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="container">
        <table border="1">
            <tr>
                <td target="hostname">1.1.1.1</td>
                <td target="port">80</td>
                <td target="ip">192.168.1.101</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.2</td>
                <td target="port">81</td>
                <td target="ip">192.168.1.102</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.3</td>
                <td target="port">82</td>
                <td target="ip">192.168.1.103</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.4</td>
                <td target="port">83</td>
                <td target="ip">192.168.1.104</td>
                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
            </tr>
        </table>
    </div>
    <div class="modal hide">
        <p>主机：<input name="hostname" type="text"></p>
        <p>端口：<input name="port" type="text"></p>
        <p>地址：<input name="ip" type="text"></p>
        <p><input type="button" value="取消"></p>
    </div>
    <div class="shade hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //添加按钮
        $('input[value="添加"]').click(function(){
            $('.hide').removeClass('hide');
        });
        //取消按钮
        $('input[value="取消"]').click(function(){
            $('input[type="text"]').val('');
            $('.modal,.shade').addClass('hide');
        });
        //编辑按钮
        $('input[value="编辑"]').click(function(){
            $('.hide').removeClass('hide');
            //获取点击前面标签
            var tds = $(this).parent().prevAll();
            tds.each(function(){
                //获取target值
                var tar_val = $(this).attr('target');
                //获取当前td的内容
                var con = $(this).text();
                //根据target寻找modal中的对应框，并写入内容
                $('.modal input[name="'+tar_val+'"]').val(con);
            });
        });
        //删除按钮
        $('input[value="删除"]').click(function(){
            $(this).parent().parent().remove();
        });
    </script>
</body>
</html>

simon5169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 模态对话框

JQuery 模态<!DOCTYPE html><html lang="en"><head> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <meta cha...
复制链接

扫一扫