JavaScript基础（7.综合实例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -300px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
<div>
    <input type="button" value="添加" onclick="ShowModel();"/>
    <table>
        <thead>
        <tr>
            <th>主机名</th>
            <th>端口</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1.1.1.1</td>
            <td>90</td>
        </tr>
        <tr>
            <td>1.1.1.2</td>
            <td>91</td>
        </tr>
        <tr>
            <td>1.1.1.3</td>
            <td>92</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="取消" onclick="HideModel();"/>

        <input type="button" value="确定"/>

</p></div><script> function ShowModel(){ document.getElementById("i1").classList.remove("hide"); document.getElementById("i2").classList.remove("hide"); } function HideModel(){ document.getElementById("i1").classList.add("hide"); document.getElementById("i2").classList.add("hide"); }</script></body></html>

效果是这样：
打开网页时候是这样：
JavaScript基础（7.综合实例）

然后点击添加键后变成这样：

JavaScript基础（7.综合实例）

如果点击取消键之后会变成这样：

JavaScript基础（7.综合实例）

这就是一个简单的例子，综合了以前学过的知识。

JavaScript基础（7.综合实例）

相关推荐