模态框实例

代码：

<style>
        .hide{
            display:none;
        }
        .c1{
            position:fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            background-color:black;
            opacity: 0.8;
            z-index:9;
        }
        .c2{
            width:500px;
            height:430px;
            background-color:white;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margi-top :-250px;
            z-index:10;
            
        }
    </style>
<div>
    <input type="button" value="添加主机"onclick="show();"/>
    <table>
        <tr>
            <th>主机名</th>
            <th>端口</th>
        </tr>
        <tr>
            <td>127.0.0.1</td>
            <td>80</td>
        </tr>
        <tr>
            <td>192.168.1.11</td>
            <td>8080</td>
        </tr>
        <tr>
            <td>10.17.32.12</td>
            <td>8088</td>
        </tr>
    </table>
    <!--灰幕-->
    <div class="c1 hide" id="i1">
    </div>
    <!--弹出框-->
    <div class="c2 hide" id="i2">
    <input type="text" /><br />
    <input type="text" />
    <div>
    <input type="button" value="取消"  onclick="hide();"/>
    <input type="button" value="确定" />
    </div>
    </div>
    </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>