zoukankan      html  css  js  c++  java
  • python :模态对话框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Title</title>
        <style>
            .hide {
                display: none;
            }
    
            .modal {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 400px;
                margin-left: -250px;
                margin-top: -250px;
                background-color: #eeeeee;
                z-index: 10;
            }
    
            .shadow {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0.6;
                background-color: black;
                z-index: 9;
            }
        </style>
    </head>
    <body>
    <a onclick="add();">添加</a>
    <table border="1" id='ta'>
        <tr>
            <td id="tt" target="hostname">1.1.1.11</td>
            <td target="port">80</td>
    
            <td>
                <a class="edit">编辑</a> | <a class="del_model">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del_model">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del_model">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del_model">删除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"/>
            <input name="port" type="text"/>
    
        </div>
        <div>
            <input type="button" value="取消" onclick="cancel();"/>
            <input id="confirm" type="button" value="确定" />
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function add() {
            $(".modal,.shadow").removeClass('hide')
        }
        function cancel() {
            $(".modal,.shadow").addClass('hide')
            $('.modal input[type="text"]').val("")
    //        点击取消按钮就会清空文本框的内容
        }
    
    
        $(".edit").click(function () {
            $('.modal,.shadow').removeClass('hide')
            var res = $(this).parent().prevAll()
    //        循环每一个td
            res.each(function () {
    //             获取hostname属性
                var host_name = $(this).attr('target');
    //             获取内容1.1.1.11
                var res = $(this).text();
    //             $('.modal input[name="hostname"]')
    //             字符串拼接
                var a = '.modal input[name="';
                var b = '"]'
                var tmp = a + host_name + b
                $(tmp).val(res)
    
            })
    
    
    //        .val()进行赋值
        })
        $('.del_model').click(function () {
            $(this).parent().parent().remove();
    
        })
        function confirm_model() {
            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML='1.1.1.1';
            var td2 = document.createElement('td');
            td2.innerHTML='8001';
            $(tr).append(td1);
            $(tr).append(td2);
            $('#ta').append(tr);
            $(".modal,.shadow").addClass('hide');
    
        }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    HDU 1010 Tempter of the Bone
    HDU 4421 Bit Magic(奇葩式解法)
    HDU 2614 Beat 深搜DFS
    HDU 1495 非常可乐 BFS 搜索
    Road to Cinema
    Sea Battle
    Interview with Oleg
    Spotlights
    Substring
    Dominating Patterns
  • 原文地址:https://www.cnblogs.com/xuehuahongmei/p/6146701.html
Copyright © 2011-2022 走看看