js弹窗插件之 SweetAlert(非常好用又好看的弹窗js库)

r囧r小猫 2023-10-14 18:38 13阅读 0赞

## js弹窗插件 之 SweetAlert(非常好用又好看的弹窗js库) ##

#### **SweetAlert 是一个基于 JavaScript 的弹窗插件，用于创建美观而且高度可定制的弹窗效果。** ####

*SweetAlert 提供了多种弹窗风格和动画效果，可以用于警告、确认、提示和错误等不同的场景。它具有以下特点*：

**美观可定制**：SweetAlert 提供了漂亮和精心设计的弹窗样式，并且可以通过更改参数来自定义弹窗的外观和行为，使其与网站的样式保持一致。

**灵活易用**：使用 SweetAlert 只需要很少的代码量，可以通过简单的调用来创建和展示弹窗，如警告提示、确认对话框等。它还支持回调函数，可以在用户与弹窗交互后执行相应的操作。

**良好的用户体验**：SweetAlert 提供了流畅的动画效果和友好的用户体验，可以增强网站的交互性和可用性。

**跨平台兼容**：SweetAlert 可以在主流的现代浏览器上运行，包括 Firefox、Chrome、Safari 等。

通过引入 SweetAlert.min.js 和相关的 CSS 文件，你可以在网页中使用 SweetAlert 插件来创建丰富、美观的弹窗，提升用户体验。

### 如何使用： ###

###### 1.首先引入资源文件 ######

<link rel="stylesheet" href="static/qiantai/css/sweetaleat.css">
    <script src="static/qiantai/js/sweetalert.min.js"></script>

###### 2.直接上官网看哈哈哈: ######

[sweetalert官网链接][sweetalert]

效果：  
![在这里插入图片描述][321958aff8fd44a1a1d441c4f20b66f6.png_pic_center]

#### sweetalert1样式比较单一如果有更多的需求可以使用 sweetalert2：[sweetalert2官网链接][sweetalert2] ####

#### sweetalert1的百度资源文件(js与css) ####

[分享链接][Link 1]  
提取码：89w5

[sweetalert]: https://sweetalert.js.org/docs/#configuration
[321958aff8fd44a1a1d441c4f20b66f6.png_pic_center]: https://img-blog.csdnimg.cn/321958aff8fd44a1a1d441c4f20b66f6.png#pic_center
[sweetalert2]: https://sweetalert2.github.io/
[Link 1]: https://pan.baidu.com/s/1qpFRwuX3TaBkF3YoWmRpoQ

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 js制作弹窗

人见解，欢迎大家一起交流学习n(\*≧▽≦\*)n 效果图： ![2019091016350945.gif][] **html页面** <body> ...

不念不忘少年蓝@/ 2024年04月18日 18:40/ 0 赞/ 90 阅读

相关 js弹窗插件之 SweetAlert(非常好用又好看的弹窗js库)

js弹窗插件之 SweetAlert(非常好用又好看的弹窗js库) SweetAlert 是一个基于 JavaScript 的弹窗插件，用于创建美观而且高度可定制的弹

r囧r小猫/ 2023年10月14日 18:38/ 0 赞/ 14 阅读

相关 js自定义弹窗

<div id="app_pop_up">

深藏阁楼爱情的钟/ 2023年02月16日 06:48/ 0 赞/ 35 阅读

相关 JS_js弹窗封装

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔情只为你懂/ 2022年11月19日 05:26/ 0 赞/ 241 阅读

相关 css和js弹窗

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-U

朱雀/ 2022年09月30日 15:00/ 0 赞/ 175 阅读

相关 js页面弹窗

1、html元素 <div id="light" class="white_content"> <div id="lightHeader"><spa

刺骨的言语ヽ痛彻心扉/ 2022年09月26日 04:58/ 0 赞/ 234 阅读

相关 SweetAlert2网页弹窗---JAVASCRIPT弹窗

一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗，无任何依赖中文文档地址:[http://mishengqiang.com/swe

ゞ浴缸里的玫瑰/ 2022年09月04日 14:53/ 0 赞/ 306 阅读

相关 SweetAlert2一个前端最好用的弹窗

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

深碍√TFBOYSˉ_/ 2022年07月13日 05:43/ 0 赞/ 229 阅读

相关 js弹窗

js的三种最常见的对话框 \[javascript\] [view plain][][copy][view plain] 1. //==================

布满荆棘的人生/ 2022年06月10日 09:47/ 0 赞/ 309 阅读

相关 JS实现图片弹窗

使用JavaScript和CSS实现点击图片缩略图，创建图片弹窗的功能。需要配置HTML页面，JS代码和CSS代码 HTML代码： <body>

阳光穿透心脏的1/2处/ 2022年04月25日 02:20/ 0 赞/ 384 阅读