阅读量:0
要使用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()
函数将被调用。