写在前面
你们好,我是小庄。很高兴能和你们一起学习编程。如果您对Java感兴趣的话可关注我的动态.
写博文是一种习惯,在这过程中能够梳理和巩固知识点。
在网页上,一个美观的弹窗提示效果可以提高用户的体验度,让用户更加愉快的进行游览页面和购物等操作。
方式一:
插件的下载地址:https://pan.baidu.com/s/1fp0dinQmzmEn1Z4CicytNQ
提取码:t9em
复制这段内容后打开百度网盘手机App,操作更方便哦
方式二:
链入官网,这个需要联网才能使用
<link rel="stylesheet" type="text/css" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
下面,我来分享一个非常好看实用的提示插件:sweetalert
先来看预览效果图
不多说,下面我们直接来干代码
(1)导入 css文件和js文件
<link rel="stylesheet" type="text/css" href="css/sweetalert.css">
<script type="text/javascript" src="js/sweetalert.min.js"></script>
<!--<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>-->
(2)使用sweetalert插件
第一张图片解析:
这里显示的成功和错误提示,主要靠"success"和"error"两个关键字来控制
例如:
//错误提示
sweetAlert("提示", "注册失败!", "error");
//成功提示
sweetAlert("提示", "注册成功!", "success");
第二张图片解析:
如果我们要进行页面验证用户是否登录的时候需要用到第二张效果图
swal({
title: "亲!您需要先登录",//标题
text: "登录后才能进行留言",//显示内容
type: "warning",// 弹框类型
showCancelButton: true,// 是否显示取消按钮
confirmButtonColor: "#DD6B55",//确认按钮颜色
cancelButtonColor: "#ffffff", // 取消按钮的 颜色
confirmButtonText: "是的,返回登录",// 确定按钮的文字
cancelButtonText: "返回首页",//取消的标题
closeOnConfirm: false,//是否关闭弹窗,这里要使用false
closeOnCancel: false,//是否聚焦取消按钮
customClass: "custom_swal"
},
function (isConfirm) {
if(isConfirm){
//点击返回登录,跳转指定的链接
window.location.href = "login.html";
}else{
//点击返回首页,跳转指定的链接
window.location.href = "index.html";
//想定制取消,再加一个取消弹窗
//swal("提示!", "你取消了改操作!", "error")
}
});
第三张图解析:
如果我们想要显示√的状态,则将属性type改成success
swal({title:"提示信息",
text:"您需要登录才能查看个人信息!。",
type:"success"},function(){
window.location.href = "login.html";
});