基於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 我發現了 寫錯了，將錯就錯吧⊙﹏⊙‖∣