怎样用JS Prompt弹出自定义对话框

小樊

2024-10-12 21:38:27

栏目: 编程语言

要使用JavaScript的prompt()函数弹出自定义对话框，您需要创建一个HTML文件，然后在其中编写JavaScript代码。以下是一个简单的示例，展示了如何创建一个带有自定义文本和按钮的自定义提示对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Prompt Dialog</title>
    <style>
        /* 自定义样式 */
        .custom-prompt {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .custom-prompt button {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="custom-prompt" id="customPrompt">
        <p id="promptText">请输入您的信息：</p>
        <button onclick="submitForm()">确定</button>
        <button onclick="closePrompt()">取消</button>
    </div>

    <script>
        function showCustomPrompt() {
            document.getElementById('customPrompt').style.display = 'block';
        }

        function closePrompt() {
            document.getElementById('customPrompt').style.display = 'none';
        }

        function submitForm() {
            var inputText = document.getElementById('promptText').innerText;
            alert('您输入的信息是：' + inputText);
            closePrompt();
        }

        // 显示自定义提示对话框
        showCustomPrompt();
    </script>
</body>
</html>

在这个示例中，我们创建了一个带有自定义文本和按钮的对话框。通过修改promptText变量，您可以更改对话框中显示的文本。当用户点击“确定”按钮时，submitForm()函数将被调用，显示他们输入的信息。当用户点击“取消”按钮或关闭对话框时，closePrompt()函数将被调用。

怎样用JS Prompt弹出自定义对话框

最新问答

相关标签