zoukankan      html  css  js  c++  java
  • 模拟对话框的实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
    
            }
            .c1{
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: greenyellow;
                opacity: 0.6;
            }
            .c2{
                 500px;
                height: 500px;
                background-color: dodgerblue;
                position: fixed;
                left: 50%;
                top: 50%;
                margin-left: -250px;
                margin-top: -200px;
                z-index: 10;
            }
        </style>
    </head>
    <body style="margin: 0;">
        <div>
            <input type="button" value="添加" onclick="show()"/>
            <table>
                <thead>
                    <tr>
                        <th>主机 </th>
                        <th>端口器</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>123123</td>
                        <td>567567</td>
                    </tr>
                    <tr>
                        <td>789789</td>
                        <td>567567</td>
                    </tr>
                    <tr>
                        <td>11111111</td>
                        <td>567567</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--增加表层-->
        <div  id="i1" class="c1 hide"></div>
        <!--表层结束-->
        <!--弹出框-->
        <div id="i2" class="c2 hide">
            <p><input type="text"/> </p>
            <p><input type="text"/> </p>
            <p><input type="button" value="确定"/> </p>
            <p><input type="button" value="取消" onclick="hide()"/> </p>
        </div>
        <!--弹出框结束-->
        <script>
            function  show() {
                document.getElementById('i1').classList.remove('hide')
                document.getElementById('i2').classList.remove('hide')
            }
            function hide() {
                document.getElementById('i1').classList.add('hide')
                document.getElementById('i2').classList.add('hide')
    
            }
        </script>
    
    </body>
    </html>
    
  • 相关阅读:
    python基础33——进程池&线程池/协程
    python基础32——线程
    pycharm2020
    python基础31——进程
    python基础31——操作系统史&多道
    jmeter如何保持JSESSIONID
    Jmeter中自动重定向与跟随重定向的区别
    Jmeter之HTTP Cookie 管理器
    Kubernetes简述
    docker集群部署
  • 原文地址:https://www.cnblogs.com/qiangayz/p/8720699.html
Copyright © 2011-2022 走看看