zoukankan      html  css  js  c++  java
  • sweetalert提示框

    文档

    sweetalert Api:http://t4t5.github.io/sweetalert/

    开源项目源码:https://github.com/t4t5/sweetalert

    在文件中首先引入css和js 文件

    <link href="/static/js/sweetalert/sweet-alert.css" rel="stylesheet"/>
    <!-- jQuery 3 -->
    <script src="/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--操作提示框-->
    <script src="/static/js/sweetalert/sweet-alert.min.js"></script>

    js代码:

         swal({
                        title: "操作提示",      //弹出框的title
                        text: "确定删除吗?",   //弹出框里面的提示文本
                        type: "warning",        //弹出框类型
                        showCancelButton: true, //是否显示取消按钮
                        confirmButtonColor: "#DD6B55",//确定按钮颜色
                        cancelButtonText: "取消",//取消按钮文本
                        confirmButtonText: "确定",//确定按钮上面的文档
                        closeOnConfirm: true
                    }, function () {
              // 点击确定后执行以下代码
              ..............
              });

    效果图

    参数说明:

           showCancelButton:是否显示取消按钮;

           animation:提示框弹出时的动画效果,可选(pop、none、slide-from-top、slide-from-bottom);

           timer:设置自动关闭提示框时间(毫秒);

           showConfirmButton:是否显示确定按钮;

           confirmButtonText:定义确定按钮文本;

           cancelButtonText:定义取消按钮文本;

           imageUrl:定义弹出框的图片地址;
     

    推荐学习网址:https://sweetalert.js.org/docs/

  • 相关阅读:
    [题解] [JSOI2015] 圈地
    [题解] [JSOI2015] 最小表示
    [题解] [JSOI2015] 套娃
    [题解] [JSOI2015] 非诚勿扰
    [题解] [JSOI2015] 送礼物
    [题解] [JSOI2015] 送礼物
    [题解] [JSOI2015] 子集选取
    [题解] [JSOI2015] salesman
    AC自动机学习笔记
    [题解] [JSOI2014] 矩形并
  • 原文地址:https://www.cnblogs.com/wendj/p/10010144.html
Copyright © 2011-2022 走看看