js怎么弹出一个输入窗

使用JavaScript弹出一个输入窗的基本方法有三种：prompt函数、使用HTML和CSS创建自定义输入窗、使用第三方库。下面将详细介绍如何使用这些方法中的一种。

一、使用`prompt`函数

prompt函数是JavaScript内置的方法之一，用于弹出一个输入对话框，用户可以在对话框中输入文字。它简单、直接、易于使用。但是，它的样式和功能相对比较简陋，无法进行复杂的自定义。

var userInput = prompt("请输入您的名字：");
if (userInput !== null) {
    console.log("用户输入的是：" + userInput);
}

优缺点

优点： 使用便捷、适合快速实现、无需额外依赖。

缺点： 样式无法自定义、交互体验较差、功能简单。

二、使用HTML和CSS创建自定义输入窗

为了创建更具交互性和美观性的输入窗，我们可以使用HTML和CSS，并通过JavaScript来控制其显示和隐藏。

HTML部分

<!DOCTYPE html>
<html>
<head>
    <style>
        .modal {
            display: none; /* 隐藏对话框 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>自定义输入窗示例</h2>
    <button id="openModalBtn">打开输入窗</button>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>请输入您的名字：</p>
            <input type="text" id="userName" />
            <button id="submitBtn">提交</button>
        </div>
    </div>
    <script>
        // 获取元素
        var modal = document.getElementById("myModal");
        var btn = document.getElementById("openModalBtn");
        var span = document.getElementsByClassName("close")[0];
        var submitBtn = document.getElementById("submitBtn");
        // 打开对话框
        btn.onclick = function() {
            modal.style.display = "block";
        }
        // 关闭对话框
        span.onclick = function() {
            modal.style.display = "none";
        }
        // 提交输入内容
        submitBtn.onclick = function() {
            var userName = document.getElementById("userName").value;
            console.log("用户输入的是：" + userName);
            modal.style.display = "none";
        }
        // 点击其他区域关闭对话框
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

优缺点

优点： 自定义样式、用户体验好、功能丰富。

缺点： 需要更多的代码和开发时间、需要掌握HTML和CSS。

三、使用第三方库

还有一种便捷的方法是使用第三方库，如SweetAlert2，它提供了丰富的弹窗样式和功能，能够快速实现美观的输入窗。

示例代码

首先，引用SweetAlert2的CSS和JS文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
</head>
<body>
    <button id="openInputBtn">打开输入窗</button>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
    <script>
        document.getElementById('openInputBtn').addEventListener('click', function() {
            Swal.fire({
                title: '请输入您的名字',
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'off'
                },
                showCancelButton: true,
                confirmButtonText: '提交',
                showLoaderOnConfirm: true,
                preConfirm: (name) => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(name)
                        }, 2000)
                    })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: `您输入的是: ${result.value}`
                    })
                }
            })
        })
    </script>
</body>
</html>

优缺点

优点： 快速实现、样式美观、功能丰富、易于使用。

缺点： 需要加载外部库、可能增加页面加载时间。

总结

使用JavaScript弹出输入窗的三种方法：prompt函数、使用HTML和CSS创建自定义输入窗、使用第三方库（如SweetAlert2）。每种方法都有其优缺点，开发者可以根据具体需求选择合适的方法。如果需要快速实现并且对样式要求不高，可以使用prompt函数；如果需要高度自定义的样式和功能，可以使用HTML和CSS；如果需要快速实现美观的弹窗，并且可以接受加载第三方库，可以选择SweetAlert2。