基于bootstrap modal 定制confirm

基于bootstrap modal 定制自己的confirm

这是最初初始的(太丑）

我想要定制的confirm 有什么效果呢？

1. 可以复用，在多个页面使用（全局只需要存在一个）
2. 可以指定回调函数（尤其是指定 ‘确定’ 被点击，触发自己指定的某个function）
3. 样式美观（选择boottrap）

开发环境

先说明开发环境：我是使用的freemarker,直接写一个ftl.需要的页面只需要include 即可，十分方便

基础的样式文件

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet">

1 confirmmodal.ftl 文件：

<div>
    <#--    确认弹窗-->
    <#--弹窗-->
    <div class="modal fade" id="confirmModel" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <h2 class="modal-title" >
                       提示
                    </h2>
                    <h4 id="confirmLabel"></h4>
                </div>
                <input type="hidden" id="dataId">
                <div class="modal-footer form-inline">
                    <input type="button" class="btn btn-info  form-control" data-dismiss="modal"  aria-hidden="true" value="取消"></input>
                    <input type="button" class="btn btn-danger form-control" value="确认" id="btnConfirm" data-dismiss="modal">

                </div>
            </div>
        </div>
    </div>

</div>

<script>
//此方法调用将显示弹窗
//参数: this， 确认按钮文字，弹窗标题，回调函数（处理的还是外部传入的this数据）
    function showConfirmModel(that, confirm, title, callback) {
        console.log("showRejectModal orderId:" + that + '  ');
        console.log('this.lang:' + $(that).attr('lang'));
        $('#dataId').val($(that).attr('lang'));
        $("#btnConfirm").val(confirm);
        $('#confirmLabel').html(title);
        $('#btnConfirm').on('click', callback);//绑定回调函数。点击确定将执行此方法
        $('#confirmModel').modal('show');

    }

    
</script>

2 使用方式：

在 xx.ftl 文件中

  <#include '../common/confirmmodal.ftl'>//当然这个路径按照你得真实路径来
</script>
  //账号操作
    function disableAccount(that) {
        showConfirmModel(that, '确认', '确认禁用该账号？[操作后该账号不能登录，可以恢复]', function () {
            console.log('这是点击确认回调函数');
            $.ajax({
                url: '/admin/user/disable/' + $(that).attr('lang'),
                success: res => {
                    if (res.code == 0) {
                        alertSuccess("账号禁用成功");
                        setTimeout(function () {
                            doSearch(1);
                        }, 2000)
                    } else {
                        alertFail(res.msg);
                    }
                }
            })
        });

    }
    </script>

3 效果：

当然如果还有其他的什么需要也可以定制
比如：弹窗的class, 通过参数传递进去

ps： 代码中的model 我发现了 写错了，将错就错吧⊙﹏⊙‖∣