完美的alert美化

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

一、引入js和css文件

二、js调用替代alert

一、引入js和css文件

1、直接在head引入

<link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="https://blog.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项目

个人博客：blog.huangwx.cn

完美的alert美化相关推荐

Android 系统 '七夕'巨献 VIVO Xplay 基于ViVo官方稳定内核,完美root,适度美化,降噪点,完美支持官方OTA升级
ROM版本 VIVO-Xplay-PD2.13.2 ROM作者大盛 http://weibo.com/DaShengdd Android版本 Android4.2.2 创建日期 2013.08.13 ...
一些常用正则表达式片段的分析
前言: 明天就要奔赴上海了,希望是个好的开始,好久没用正则表达式了,还好之前好好学习过,捡起来也是很容易,好了,为了才重回巅峰状态,想要入门的可以给大家推荐几篇文章, 精通js正则表达式本篇文章在线 ...
移动h5开发资源整理
移动h5开发资源整理这2年来,移动h5开发逐渐成为一种主流,也不断趋向于成熟.硬件和浏览器的不断更新,曾经的浏览器兼容也不再是开发者的噩梦. 接触h5开发一年多,从最初的新手到现在,陆陆续续遇到过很 ...
elastalert
git https://github.com/Yelp/elastalert ElastAlert · ELKstack 中文指南今天聊聊ES的告警,X-Pack提供了报警组件Alert ...
官方原版美化修改版完美适配双端海洋cms模板
简介: 官方原版美化修改版海洋cms模板,官方V10.7版本自带原模板,已测试,完美无错,自适应手机端. 美化修改了:1.导航为一行,2.首页添加幻灯片效果,3.播放页修改为完整显示,不会因为页面的滑 ...
Laravel中使用SweetAlert美化提示框Alert
Laravel中使用SweetAlert美化提示框Alert 个人博客 https://blog.fmujie.cn/ The first step 使用composer安装Laravel到www目录 ...
弹出框美化 alert样式美化
引用style.css和ui.js就可以直接用以下接口调用! alert_带标题: mizhu.alert( 'alert_带标题' , '这是alert效果' ); alert_带图标: mizhu ...
js原生alert弹框美化
1.说明通过自定义方式美化弹框,使用alert弹框错误提示 2.示例 html代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
首发ViVo Xplay X510w 2.14.5/永久root/状态栏美化/相机降噪点/完美支持官方OTA/稳定,流畅ROM
ROM版本 VIVO Xplay PD2.14.5 ROM作者大盛 http://weibo.com/DaShengdd Android版本 Android 4.2.2 创建日期 2013.08.1 ...

完美的alert美化

完美的alert美化相关推荐

最新文章

热门文章