会这点，你的网站会更加逼格

写在前面
  你们好，我是小庄。很高兴能和你们一起学习编程。如果您对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,//是否关闭弹窗，这里要使用falsecloseOnCancel: 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";});

要是觉得有用，记得点赞+关注。后期会努力更新干货

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！