html中的三种弹窗

一、js中的三种弹窗

**

  1. alert()
  2. confirm()
  3. prompt

**

  1. alert() 警示对话框
    – alert是js中的window对象的一种方法
    – 只包含一个确认按钮
    – 返回值类型undefined(未定义)
    java var text=alert("测试"); document.write(text);在这里插入图片描述
    点击确认时的效果
  2. confirm() 确认对话框
    – confirm是js中的window对象的一种方法
    – 包含确认和取消按钮
    – 返回值:确认->true 取消->false 都是布尔值
var text=confirm("测试");
document.write(text);

在这里插入图片描述
点击确认时的效果

  1. prompt() 提示框 交互性最好
    – prompt是js中的window对象的一种方法
    – 包含确认和取消按钮 同时提供了一个可输入文本框
    – 返回值:确认->返回文本输入的内容(字符串类型),当用户没有输入内容时返回初始值 取消->null
var text=prompt("测试","请在这里输入内容");
document.write(text);

在这里插入图片描述
未输入内容点击确认的效果

为了美化弹窗alert并添加触发代码,我们可以使用第三方库如SweetAlert2。 首先,我们需要在HTML文件引入SweetAlert2的CSS和JS文件: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.14.1/dist/sweetalert2.min.css"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.14.1/dist/sweetalert2.min.js"></script> ``` 然后,在需要触发弹窗的JavaScript代码,使用SweetAlert2的`fire()`方法来创建弹窗: ```javascript Swal.fire({ title: 'Hello', text: 'This is a sweet alert!', icon: 'success', confirmButtonText: 'OK' }); ``` 在这个示例,我们创建了一个标题为“Hello”的成功弹窗,内容为“This is a sweet alert!”,并添加了一个确认按钮,按钮上显示“OK”。 完整的HTML和JavaScript代码示例如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SweetAlert2 Demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.14.1/dist/sweetalert2.min.css"> </head> <body> <button onclick="showAlert()">Click me</button> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.14.1/dist/sweetalert2.min.js"></script> <script> function showAlert() { Swal.fire({ title: 'Hello', text: 'This is a sweet alert!', icon: 'success', confirmButtonText: 'OK' }); } </script> </body> </html> ``` 在这个示例,我们创建了一个按钮,当用户点击按钮时,将会触发弹窗弹窗的样式和内容可以根据需要进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值