SweetAlert2一个前端最好用的弹窗

最新推荐文章于 2023-07-10 14:16:53 发布
置顶 VIP文章 最新推荐文章于 2023-07-10 14:16:53 发布
阅读量2.5w 收藏 18
点赞数 6
分类专栏： 移动前端开发小随笔 文章标签： Sweet Alert 弹窗 dialog
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brucecheng22/article/details/53895148
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>SweetAlert2</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="resource/css/mui.min.css">
		<link rel="stylesheet" href="resource/css/sweetalert2.min.css" />
		<script type="text/javascript" src="resource/js/sweetalert2.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>
		<script type="text/javascript" src="resource/js/jquery-2.1.1.min.js"></script>
		<style>
			.mui-content-padded {
				margin: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="base">基本信息框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="success">成功提示框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="error">错误提示框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="warning">警告提示框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="info">消息提示框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="question">疑问提示框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="autoclose">自动关闭对话框</button>
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="design">自定义标签和按钮样式</button>
				<button type="button" class="mui-btn mui-btn-primary mui-
最低0.47元/天 解锁文章
BruceCheng夏夏
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
sweetAlert弹窗文件 JS和CSS
06-08
alert弹窗插件所需要的JS和CSS文件, 本人已经对代码进行了少许更改,但是完全不影响使用. 欢迎需要者下载!
java Swing实现弹窗效果
08-25
主要为大家详细介绍了java Swing实现弹窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
sciter 提示消息弹窗与自定义弹窗
qq_42095701的博客
12-07 488
<html> <head> <title>view.msgbox() variations</title> <style></style> <script type="text/tiscript"> @click @on "#hello-world-1": { var r = view.ms...
js插件---弹出层sweetalert2
gzh_7的博客
05-13 1920
js插件---弹出层sweetalert2（总结） 一、总结 sweetalert2的窗口美观，移动端适配也比较好，易学易用，是一款简单便捷的组件，值得学习！ SweetAlert2和SweetAlert的区别？ SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框。 SweetAlert2是一款功能强大的纯Js模态消息对话框插件。Swe
ct.js笔记-整合SweetAlert2，弹出输入框（添加Cat模组）
IT1995的博客
07-10 2863
⑤types.d.ts：防止ct.js调用对应函数时，出现不认识函数，出现波浪线。③injections文件夹：当有includes时里面的js文件或css文件，需要写或就到这里面；其中sweetalert2.min.css和sweetalert2.min.js是官方的css和js。②includes文件夹：把需要引入的三方文件放在这里面；④module.json：ct.js加载的模组介绍文件；①index.js：调用模组的入库文件；injections文件夹。
sweetAlert2中的告警对话框在layer之上的弹出
xiaozhu2hao的专栏
07-09 2782
由于layer默认的弹窗z-index为19891014，所有在layer之上弹窗出sweetAlert,需要修改sweetalert2.css,可将其中z-index的值大于19891014即可.swal2-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-alig...
Android弹窗插件 sweet-alert-dialog
贵公子丶笔记
10-30 2084
版权声明：本文为博主原创文章，未经博主允许不得转载。http://blog.csdn.net/leytton https://blog.csdn.net/Leytton/article/details/72178559 【本文出处: http://blog.csdn.net/leytton/ar...
前端框架Vue.js与sweetalert2.min.js结合实现tabe添删改查（CRUD）
WenRouDG的博客
08-02 985
前言 作为一个学生的我，很清楚的知道  “纸上得来终觉浅,绝知此事要躬行。知识一定不仅局限于课堂”。所以今天再次自学了关于“前端框架的知识——Vue.js”;那么接下来分享一下我今天的成果。vue.js与sweetalert.js关于table的CRUD。 分享内容 运行整体效果 1：引用相关js <!--SweetAlert2是一款功能强大的纯Js模态消息对话框插件。 SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图
使用SweetAlert2创建漂亮的弹出消息
代码教主
06-19 858
有时，您将不得不向用户显示一个警告框，以使他们知道错误或通知。 浏览器提供的默认警报框的问题在于它们不是很吸引人。 当您创建具有丰富色彩组合和精美动画的网站以改善用户的浏览体验时，未设置样式的警报框似乎会不合适。 在本教程中，您将学习一个名为SweetAlert2的库，该库使我们可以创建各种警报消息，可以对其进行自定义以匹配我们自己网站的外观。 显示简单的警报消息 在向用户显示所有这些...
SweetAlert2 弹窗
weixin_34364135的博客
01-16 431
&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&
SweetAlert2的相关JS和CSS文件
09-02
可以使用的SweetAlert2的相关JS、CSS，并且包括兼容IE浏览器的JS文件
sweetAlert2 亲测可用
10-17
[removed][removed] <link rel="stylesheet" type="text/css" href="你的路径/sweetalert2.min.css" />
sweetalert加载弹窗定时自动关闭
09-19
sweetalert加载弹窗定时自动关闭，包含加载图片，作为一个例子
sweetalert2.github.io:SweetAlert2的文档
04-05
文档发展yarn installyarn start
vue-sweetalert2：Sweetalert2的便捷包装
02-06
vue-sweetalert2 SweetAlert2的Vue.js包装器。 支持SSR。注意： 使用“ Vue3：Composition API”时，最好不要使用此包装器。 直接调用sweetalert2更实用。 另外，最好这样做是为了更快地获得反馈，并且更接近文档。...
sweetalert加载弹窗完成自动关闭
09-19
sweetalert加载弹窗完成自动关闭，比较完整的sweetalert加载完成案例
checkbox选中属性---坑到死
热门推荐
知他人之所知，晓他人之不晓。
12-26 2万+
想必有很多做前端同学都遇到了这么一个问题。 那就是checkbox。那就是我们通过jquery设置选中的时候，发现checked属性已经设置上去了 但是选中的样式却没有。 我们做一个简单的测试：看下面三张图片 通过上面三张图我们可以看到我们有两个checkbox默认是第一个选中。 我们通过点击将第二个设置为选中状态。 然后我们通过jquery的attr属性修改选
苹果公司开发者账号注册流程详解
知他人之所知，晓他人之不晓。
11-25 1万+
这段时间在给朋友申请苹果账号，从个人开发者账号、公司账号到企业账号，申请了个遍。这里对申请流程做一下介绍，方便其他朋友，少走弯路，账号早日申请通过。 1.首先介绍下个人开发者账号、团体账号、公司账号之间的区别：   用途 限制 是否需要邓白氏码 费用(元) 申请地址 个人开发者账号 用于个人开发者上传
sweetalert2 背景图片
最新发布
02-08
sweetalert2 是一个弹窗插件，它可以用于创建漂亮的弹窗和对话框。然而，sweetalert2 并不直接支持设置背景图片。它主要通过自定义 CSS 样式来实现外观的定制化。 要设置背景图片，你可以通过自定义 CSS 样式来实现。首先，你需要为弹窗的容器元素添加一个类名或 ID，例如： ```html <div id="my-dialog" class="sweetalert2-container"></div> ``` 然后，在你的 CSS 文件中，为该容器元素添加背景图片样式，例如： ```css #my-dialog { background-image: url('path/to/your/image.jpg'); background-size: cover; } ``` 这样就可以将背景图片应用到 sweetalert2 弹窗的容器元素上了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BruceCheng夏夏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值