首页如何在表单中单击按钮时显示一个弹窗显示登录成功？

如何在表单中单击按钮时显示一个弹窗显示登录成功？

时间: 2024-03-03 18:49:11 浏览: 145

可以在 HTML 页面中添加一个按钮和一个隐藏的弹窗。当用户单击按钮时，使用 JavaScript 来显示弹窗。以下是一种实现方式： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单弹窗示例</title> <style> /* 隐藏弹窗 */ #popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; border: 1px solid #ccc; } </style> </head> <body> <form>  <button type="button" onclick="showPopup()">登录</button> </form>  <div id="popup"> <p>登录成功！</p> </div> <script> function showPopup() { // 获取弹窗元素 var popup = document.getElementById("popup"); // 显示弹窗 popup.style.display = "block"; } </script> </body> </html> ``` 在这个示例中，我们在 `<head>` 标签中添加了一个 CSS 样式，用于隐藏弹窗。然后在表单中添加了一个按钮，当用户单击按钮时，会调用 JavaScript 中的 `showPopup()` 函数来显示弹窗。在 JavaScript 中，我们使用 `document.getElementById()` 方法来获取弹窗元素，并将其样式的 `display` 属性设置为 `"block"`，从而显示弹窗。注意，这里的按钮需要使用 `type="button"`，避免默认的提交表单行为。

阅读全文