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

写在前面
  你们好,我是小庄。很高兴能和你们一起学习编程。如果您对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";
              });
要是觉得有用,记得点赞+关注。后期会努力更新干货
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值