javascript 提交弹窗

Posted 想翻身的猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 提交弹窗相关的知识，希望对你有一定的参考价值。

<!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: 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: -200px;
            z-index: 10;
        } /*k
    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="ShowModel()">
        <input type="button" value="全选" onclick="ChooseAll()">
        <input type="button" value="取消" onclick="CancleAll()">
        <input type="button" value="反选" onclick="Reverse()">
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox"></td>
                    <td>1.1.1.2</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.3</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.4</td>
                    <td>193</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="确定">
            <input type="button" value="取消" onclick="HideModel()">


        </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‘);
        }
        function ChooseAll() {
            var tbody = document.getElementById(‘tb‘); //获取所有的tr
            var tr_list = tbody.children;

            for(var i=0; i<tr_list.length;i++){
                //循环所有的tr, current_tr当前
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0] ;//checkbox的checked
                checkbox.checked = true

            }}

            function CancleAll() {
                var tbody = document.getElementById(‘tb‘); //获取所有的tr
                var tr_list = tbody.children;

                for (var i = 0; i < tr_list.length; i++) {
                    //循环所有的tr, current_tr当前
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0] ;//checkbox的checked
                    checkbox.checked = false

                }
            }

            function Reverse() {
                var tbody = document.getElementById(‘tb‘); //获取所有的tr
                var tr_list = tbody.children;

                for (var i = 0; i < tr_list.length; i++) {
                    //循环所有的tr, current_tr当前
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0] ;//checkbox的checked
                    if(checkbox.checked){
                        checkbox.checked=false;
                    }else{
                        checkbox.checked=true;
                    }

                }
            }

    </script>


</body>
</html>

 

以上是关于javascript 提交弹窗的主要内容，如果未能解决你的问题，请参考以下文章

联系表单 7 成功提交后如何打开弹窗

javascript弹窗实例_简单博客

小程序各种功能代码片段整理---持续更新

html,CSS,javascript 做一个弹窗

弹窗代码

Javascript基础了解（12月3日）