JS弹出对话框实现方法(三种方式)_js对话框资源-CSDN文库

115 浏览量 2020-11-22 02:36:43 上传评论收藏 25KB PDF 举报

本文实例讲述了JS弹出对话框实现方法。分享给大家供大家参考，具体如下： 1.警告框 <html> <head> [removed] function disp_alert() { alert("我是警告框！！") } [removed] </head> <body> <input type="button" onclick="disp_alert()" value="显示警告框" /> </body> </html> 2.确定取消框 <html> <head> [removed] function d JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和用户界面的动态化。在网页开发中，弹出对话框是常见的交互手段，可以用来警告用户、请求确认或获取用户输入。本文将详细讲解三种常用的JS弹出对话框实现方法。 1. 警告框警告框通过`alert()`函数实现，它会弹出一个包含指定消息的对话框，并且只有一个“确定”按钮。用户点击“确定”后对话框关闭，程序继续执行。例如： ```html <!DOCTYPE html> <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框！！"); } </script> </head> <body> <input type="button" onclick="disp_alert()" value="显示警告框" /> </body> </html> ``` 在这个例子中，当用户点击“显示警告框”按钮时，`disp_alert`函数会被调用，弹出一个包含“我是警告框！！”文本的警告框。 2. 确定/取消框确定/取消框通过`confirm()`函数实现，它会弹出一个包含消息和“确定”、“取消”两个按钮的对话框。如果用户点击“确定”，则返回`true`；点击“取消”则返回`false`。例如： ```html <!DOCTYPE html> <html> <head> <script type="text/javascript"> function disp_confirm() { var r = confirm("按下按钮"); if (r == true) { document.write("您按了确认！"); } else { document.write("您按了取消！"); } } </script> </head> <body> <input type="button" onclick="disp_confirm()" value="显示确认框" /> </body> </html> ``` 在这个例子中，点击“显示确认框”按钮会弹出一个询问用户是否按下按钮的对话框，根据用户的选择执行不同的操作。 3. 有输入的框有输入的框通过`prompt()`函数实现，它会弹出一个带有输入框和“确定”、“取消”按钮的对话框，允许用户输入数据。`prompt()`函数返回用户输入的值，或者在用户点击“取消”时返回`null`。例如： ```html <!DOCTYPE html> <html> <head> <script type="text/javascript"> function disp_prompt() { var name = prompt("请输入您的名字", "Bill Gates"); if (name != null && name != "") { document.write("你好！" + name + " 今天过得怎么样？"); } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="显示提示框" /> </body> </html> ``` 在这个例子中，用户被要求输入名字，如果用户输入并点击“确定”，则会显示问候语；若点击“取消”或不输入任何内容，不会有任何输出。这三种对话框都是JavaScript中基本的用户交互工具，它们可以帮助开发者创建更富于交互性的网页应用。然而，需要注意的是，由于弹出对话框会阻断页面的正常流程，过度使用可能会对用户体验造成负面影响。因此，在实际开发中，应适度使用，并结合其他更现代的交互元素，如模态框或自定义对话组件，以提供更好的用户体验。

资源推荐

资源评论