加载SweetAlert的CSS、JS文件。

  • SweetAlert2的头部CSS与底部JS
//头部,说起来之前使用函数调用CSS不成功,使用直连就没问题。。注意这个不是CDN加速链接。只是我测试加载本地的,后期会删除的
<link href="http://bi.guugg.com/usr/themes/excellent/app-anli/vendors/css/sweetalert2.min.css" rel="stylesheet">
//底部。百度搜下有CDN加速的
<script src="usr/themes/excellent/app-anli/vendors/js/sweetalert2.min.js"></script>
这样就完了吗? 显然没有继续往下看。 其实很好理解的。
加载SweetAlert的CSS、JS文件。
创建一个JS文件,用来存 swal ,使其能调用
在需要显示的页面添加按钮,对应其ID:id="*"

创建一个JS文件,用来存 swal ,使其能调用

  • SweetAlert2显示弹窗、弹窗内容JS
//还是在底部加载JS或者在你需要弹窗的页面加载JS,在sweetalert2.min.js的下面添加
//我用的是本地JS,大家自行修改
<script src="usr/themes/excellent/app-anli/js/sweet-alerts.js"></script>

在需要显示的页面添加按钮,对应其ID:id="*"

//在`sweet-alerts.js`里以下代码:`第三行的$('#html-alert')的html-alert`就是ID
(function(window, document, $) {
    'use strict';
    $(document).ready(function () {
$('#html-alert').on('click', function () {
    swal({
        title: 'HTML <small>Title111</small>!',
        text: 'A custom <span style="color:#F6BB42">html<span> message.',
        html: true
    }).done();
});
    });
})(window, document, jQuery);

然后创建一个按钮

//我把它放在最新文章的下面,按钮样式啥的请自行折磨,以下大多属于Bootstrap4
<button type="button" class="btn btn-info btn-block" id="html-alert" >HTML</button>


最后修改:2019 年 11 月 27 日 06 : 44 PM
如果觉得我的文章对你有用,请随意赞赏