SweetAlert2网页弹窗---JAVASCRIPT弹窗

最新推荐文章于 2023-11-09 16:04:57 发布
最新推荐文章于 2023-11-09 16:04:57 发布
阅读量270 收藏
点赞数
文章标签： javascript github git html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muzihuaner/article/details/119709124
版权
一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗，无任何依赖
中文文档地址:http://mishengqiang.com/sweetalert2/
文档地址:https://sweetalert2.github.io/
GitHub项目地址:https://github.com/sweetalert2/sweetalert2
网站内教程十分详细就不再过多赘述
示例代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.1.0/sweetalert2.all.js"></script>
    <script>
        window.onload = function () {
            Swal.fire(
                {
                    title: '<i>HTML</i> <u>示例</u>',
                    type: 'info',
                    html:
                        '你可以使用<b>粗体文本</b>, ' + '<br>' +
                        '<a href="//github.com">链接</a> ' +
                        '和其它的HTML标签',
                    showCloseButton: true,
                    showCancelButton: true,
                    confirmButtonText:
                        '<i class="fa fa-thumbs-up"></i> 太棒了！',
                    cancelButtonText:
                        '<i class="fa fa-thumbs-down"></i> 晓得了'
                }
            )
        }
    </script>
</head>
<body>
</body>
</html>
木子欢儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sweetalert2.github.io:SweetAlert2的文档
04-05
文档 发展 yarn install yarn start
SweetAlert2 弹窗
weixin_34364135的博客
01-16 441
&lt;!DOCTYPE html&gt;   &lt;html&gt;          &lt;head&gt;           &lt;meta charset="utf-8"&gt;           &lt;title&gt;SweetAlert2&lt;/title&gt;           &lt;meta name="viewport&
很漂亮的SweetAlert.js 弹出层
zaixianshouce的博客
10-26 457
在线实例 实例演示 使用方法 swal("Here's a message!") 复制 参数详解 参数 默认值 描述 title null(required) 窗口的名称。可以通过对象的"title"属性或第一个参数进行传递。 text null 窗口的描述。可以通过对象的"text"属性或第二个参数进行传递。 type null 窗口的...
js弹窗插件 之 SweetAlert(非常好用又好看的弹窗js库)
weixin_72979483的博客
08-12 2135
SweetAlert 是一个基于 JavaScript 的弹窗插件，用于创建美观而且高度可定制的弹窗效果。
sweetalert api中文开发文档和手册
weixin_33850890的博客
10-29 259
官网和下载地址： http://t4t5.github.io/sweetalert/ 2016年10月30日14:10:21 废话，目前php开发越来越API话，所以php方法很多都是json返回数据，所以使用前段页面直接处理返回数据也越来越常用，而且用户体验也会更好 基本消息消息弹窗 swal("Here's a message!") 下面有文字的标题弹窗 ...
sweetalert加载弹窗完成自动关闭
09-19
swal('你好', '这是一个基本的SweetAlert弹窗', 'info'); ``` 现在，如果我们想要创建一个加载中的弹窗，我们可以使用`swal.showLoading()`方法。这将显示一个带有加载指示器的弹窗。例如： ```javascript swal....
sweetAlert弹窗文件 JS和CSS
06-08
2. `sweetalert.js` 或 `sweetalert.min.js`：这是SweetAlert的JavaScript核心文件，实现了弹窗的显示、隐藏以及各种交互功能。它使用了事件处理、DOM操作和异步处理等JavaScript技术。 3. 可能还会有其他辅助文件，...
SweetAlert 最新版 sweetalert2-11.12.3.tgz
最新发布
07-31
SweetAlert 是一个流行的JavaScript库，专门用于创建美观且可自定义的提示对话框，替代了浏览器默认的警告、确认和信息对话框。这个插件以其简洁的API和丰富的定制选项深受开发者喜爱，使得在Web应用中添加优雅的...
19种弹窗方式-JavaScript
10-17
本篇文章将详细介绍19种不同的JavaScript弹窗方式，帮助开发者掌握更多创建动态用户体验的技巧。 1. **alert()**: 最基本的弹窗，通常用于提示信息，只有一个确定按钮关闭窗口。 2. **confirm()**: 弹出一个带有...
SweetAlert 2中文文档
weixin_42652302的博客
11-09 1800
SweetAlert2中文文档
sweetalert2.zip
12-14
SweetAlert2插件实现点击(例如删除)按钮后,弹出确认框,使用特别便捷,使用方式在我博客有讲解!
SweetAlert2.js 模态消息使用入门
lss0555的博客
01-14 3074
一.前言 SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框...
SweetAlert 2
Anticlimax
06-21 2万+
官网链接 SweetAlert2 官网链接 准备阶段 CDN js 如果该 链接 时间久远了 , 可以在官网去找找最新的 可以把 js 复制出来 自己新建一个文件 然后 引用到 html 中 引用:<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> 1. 带有 确定和取消的 弹...
sweetalert2使用教程
liinux-Talk is cheap,show me the code.
05-08 1066
背景： 项目的开发中经常会遇到弹窗的问题，但是我们用到的弹窗都特别low，而且网上找了一下，发现easy-ui以及layer对应的弹窗都不是我想要的，后来发现sweetalert，发现评论还不错，所以个人尝试一下，并记录一下使用过程，便于他人借鉴。 SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。 SweetAlert2是SweetAle
使用SweetAlert2 弹层（模态，提示框，过几秒消失......等等）
lee576的专栏
10-30 833
最近在做一个Asp.net MVC的项目，里面用部分视图页弹层，感觉很不爽，用着别扭。在前后端分离的项目里，我们肯定用封装好的前端UI库了，比如element ui，但是 Asp.net MVC的项目里面集成这个比较困难......我自己测试过的例子在下面，功能非常全面，我觉得完全够用了，唯一不好得就是 html 要拼接字符串......就找了个前端弹层组件 SweetAlert2。
SweetAlert 2 全网最详细的使用方法
dibr63585的博客
03-01 2747
官网链接 SweetAlert2 官网链接 准备阶段 CDN js 如果该 链接 时间久远了 , 可以在官网去找找最新的 可以把 js 复制出来 自己新建一个文件 然后 引用到 html 中 1. 带有 确定和取消的 弹框 Swal.fire({ type: 'warning', // 弹框类型 title: '注销帐号'...
SweetAlert简单使用，弹出对话框
热门推荐
花2不谢
11-27 3万+
SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。 使用方法 要使用该插件，首先要在html的header中引入以下文件： 最基本的调用方法： sweetAlert("Hello world!");
SweetAlert2一个前端最好用的弹窗
知他人之所知，晓他人之不晓。
12-27 2万+
SweetAlert2 .mui-content-padded { margin: 10px; } 基本信息框 成功提示框 错误提示框 警告提示框 消息提示框 疑问提示框 自动关闭对话框 自定义标签和按钮样式 按钮带
html之SweetAlert2使用方法集锦（一）
Quincy.Coder的博客
10-26 6885
方式一：function check(id) { var serverAddr = 'http://127.0.0.1:8000/app/index.html'; swal({ title: "", text: "确定删除吗？", type: "warnin
sweetalert2中ajax用法,SweetAlert 2通过Ajax请求传递值不起作用
06-07
在 SweetAlert 2 中使用 Ajax 请求可以通过以下步骤实现： 1. 创建一个 SweetAlert 2 弹窗，使用 `preConfirm` 参数来处理确认按钮的点击事件。 2. 在 `preConfirm` 回调中使用 jQuery 或者原生 JavaScript 发送 Ajax 请求。 3. 在 Ajax 请求成功后，通过 `resolve()` 方法来关闭 SweetAlert 2 弹窗并返回数据。 以下是一个使用 jQuery 实现的示例代码： ```javascript Swal.fire({ title: 'Ajax 请求示例', text: '请输入你的用户名：', input: 'text', showCancelButton: true, confirmButtonText: '确认', cancelButtonText: '取消', preConfirm: function(username) { return new Promise(function(resolve) { $.ajax({ url: 'your_ajax_url', type: 'POST', data: { username: username }, success: function(data) { resolve(data); }, error: function(xhr, status, error) { resolve(''); } }); }); } }).then(function(data) { if (data) { // 处理 Ajax 请求返回的数据 } else { // Ajax 请求失败或者返回的数据为空 } }); ``` 在上面的代码中，我们使用了 `preConfirm` 回调来处理确认按钮的点击事件，并在其中发送了一个 Ajax 请求。在 Ajax 请求成功后，我们使用 `resolve()` 方法来关闭 SweetAlert 2 弹窗并返回数据。最后，在 `then()` 回调中处理 Ajax 请求返回的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值