完美的alert美化

简介: 默认的alert总是在好看的样式下显得格格不入,所以在网上搜寻良久,终于找到了一个完美的美化方案。体验请点我一、引入js和css文件二、js调用替代alert 一、引入js和css文件1、直接在head引入2、下载之后再引入,下载链接在文末。

默认的alert总是在好看的样式下显得格格不入,所以在网上搜寻良久,终于找到了一个完美的美化方案。体验请点我

一、引入js和css文件

二、js调用替代alert

 

一、引入js和css文件

1、直接在head引入

<link rel="stylesheet" type="text/css" href="http://www.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="http://www.huangwx.cn/js/sweetalert-dev.js"></script>

2、下载之后再引入,下载链接在文末。

 

二、js调用替代alert

直接使用swal()函数替代alert函数即可,同时sweetalert还提供更加多样化的弹出框。

 1、标准弹出框

swal("开始这个完美的弹出框旅程吧!")

2、带标题和文本的alert

swal("这是标题!","这是文本")

3、成功的提示,可以带动画效果的哦

swal("这还是标题!","这还是文本","success")

 

4、带函数传值的alert

    swal({ 
		title: "确定删除吗?", 
		text: "你将无法恢复该虚拟文件!", 
		type: "warning",
		showCancelButton: true, 
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "确定删除!", 
		cancelButtonText: "取消删除!",
		closeOnConfirm: false, 
		closeOnCancel: false	
		},
		function(isConfirm){ 
		if (isConfirm) { 
			swal("删除!", "你的虚拟文件已经被删除。",
		"success"); 
		} else { 
			swal("取消!", "你的虚拟文件是安全的:)",
		"error"); 
		} 
    });

5、可以内嵌html代码的alert

    swal({ 
			title: "HTML <small>标题</small>!",
			text: "自定义<span style='color:#0000FF'>这是蓝色的<span>。", 
			html: true 
		});

 

附:

1、js+css下载地址:点我

2、阿里云100+产品1000元代金券:点我领取

3、企业高性能云首购5折:点我点我

4、突发性实例特价,1核1G,1年仅需293:点我查看

 

函数的更多用法,请访问SweetAlert中文网,同时该项目来源于GitHua的SweetAlert项目

个人博客:www.huangwx.cn

 

 

 

 

 

 

 

 

 

 

 

 

 

目录
相关文章
|
3月前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条,添加自定义按钮,并绑定自定义事件,包括放大、缩小、占满屏幕和重置画布大小的功能。
59 11
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
4月前
|
资源调度 JavaScript iOS开发
基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
这篇文章介绍了一个基于Vue 2.x开发的移动端网页弹窗插件`wc-messagebox`,支持Alert、Confirm、Toast和Loading功能,并且提供了如何安装、配置和使用这些弹窗功能的详细说明。
基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
|
7月前
uView Alert 提示
uView Alert 提示
69 0
|
7月前
|
前端开发 JavaScript
不使用alert弹窗,显示提示信息
不使用alert弹窗,显示提示信息
零基础HTML入门教程(19)——表单按钮和文本域
本小结我们学习一下表单里面的按钮和文本框,我们网络中文本域和按钮,已经是很常见了,我们现在学习一下这些内容。*代码如下 效果如下 代码如下 效果如下 我们这一小节学习了,按钮和文本域,我们学到这里大致把html常用的标签全部讲完了我们课下一定多多练习熟练掌握。
零基础HTML入门教程(19)——表单按钮和文本域
|
JavaScript 前端开发
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
1197 0
|
JavaScript 前端开发
JavaScript的三种弹出提示框(alert、confirm、prompt)
JavaScript的三种弹出提示框(alert、confirm、prompt)
JavaScript的三种弹出提示框(alert、confirm、prompt)
|
监控 前端开发 JavaScript