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

avatar
作者
猴君
阅读量: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()函数将被调用。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!