JQuery Confirm确认框

来源:csdn博客 分类: 文章浏览史 发布时间:2021-01-11 22:25:30 最后更新:2021-01-11 浏览:76
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-01-11 22:25:30

1.Confirm确认框简介:

 JS自带的alert弹出框过于简陋,往往无法满足实际应用需求,为更好地实现弹窗提示功能,JQuery提供了相关的确认框组件。

        

 源码:https://github.com/craftpip/jquery-confirm

 在线DEMO:http://www.jq22.com/demo/jqueryConfirm20160413/

2.代码实现:

2.1 导入JS与CSS文件:

<link href="./css/jquery-confirm.min.css" rel="stylesheet" media="screen">
<script src="./js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="./js/jquery-confirm.min.js" type="text/javascript"></script>

2.2 HTML代码:

<button id="exportexcel" type="button" class="btn btn-primary" οnclick="expEXCEL('./product/expExcel')">导出Excel</button>

2.3 JS代码:

function expEXCEL(url) {
    $.confirm({
        title: '确认',
        content: '确认把该搜索结果导出Excel表格?',
        type: 'green',
        icon: 'glyphicon glyphicon-question-sign',
        buttons: {
            ok: {
                text: '确认',
                btnClass: 'btn-primary',
                action: function() {
                    location.href = url; //指向下载资源(此处为目标文件的输出数据流)
                }
            },
            cancel: {
                text: '取消',
                btnClass: 'btn-primary'
            }
        }
    });
}
注:expEXCEL( URL)函数可以根据需要设置,此处为下载Excel的确认弹出框,URL指向后台Controller层响应函数。



php技术微信