BootstrapDialog模態框

5最近是比較煩直接使用Bootstrap里面的模態框，滿屏都是模態框代碼，看得心煩。然后想起以前使用的BootstrapDialog.show()的方式，挺簡單好用的。然后就拿出來分享一下。

1.下載bootstrap-dialog插件

      可以在github下載，下載地址：https://github.com/nakupanda/bootstrap3-dialog

      也可以在vs的NuGet搜索bootstrap-dialog下載

2.新建一個mvc項目，命名為BootstrapDialog，通過NuGet搜索bootstrap-dialog下載bootstrap3-dialog，將添加如下文件

3.在App_Start文件下的BundleConfig中添加綁定，如下

4.在Hone控制器中添加DialogDemo方法，並添加DialogDemo試圖用來展示

5.DialogDemo界面代碼如下：

@{
    ViewBag.Title = "DialogDemo";
}

<h2>DialogDemo</h2>
<button class="btn btn-success" id="alert">BootstrapDialog.alert()</button>
<button class="btn btn-primary" id="show">BootstrapDialog.show()</button>
<button class="btn btn-danger" id="confirm">BootstrapDialog.confirm()</button>
<button class="btn btn-primary" id="load">BootstrapDialog 加載遠程頁面</button>
@section Scripts { 
<script type="text/javascript">
    $('#show').click(function () {
        BootstrapDialog.show({
            title: '提示',
            message: '請輸入驗證碼',
            closeable: true,
            buttons: [{
                label: 'Message 1',
                action: function (dialog) {
                    dialog.setMessage('Message 1');
                }
            }, {
                label: '確定',
                action: function (dialog) {
                    dialog.close();
                }
            }]
        });
    });
    $('#alert').click(function () {
        BootstrapDialog.alert({
            type: BootstrapDialog.TYPE_WARNING,
            title: '提示',
            message: "系統錯誤！",
            closeable: true,
            buttonLabel: "確定"
        });
    });
    $('#confirm').click(function () {
        BootstrapDialog.confirm(
               {
                   title: '刪除提示',
                   message: '是否確定刪除?',
                   type: BootstrapDialog.TYPE_WARNING,
                   closable: true,
                   draggable: true,
                   btnCancelLabel: '取消',
                   btnOKLabel: '刪除', // <-- Default value is 'OK',
                   btnOKClass: 'btn-warning',
                   callback: function (result) {
                       if (result) {
                           $.ajax({
                               type: "POST",
                               url: "/Admin/SMS/Delete",
                               data: { id: id },
                               dataType: "json",
                               success: function (data) {
                                   if (data.result == true) {
                                        //
                                   }
                                   else {
                                       BootstrapDialog.alert({
                                           type: BootstrapDialog.TYPE_WARNING,
                                           title: '提示',
                                           message: data.message,
                                           buttonLabel: "確定"
                                       });
                                   }
                               }
                           });
                       }
                   }
               });      
    });

    $("#load").click(function () {
        BootstrapDialog.show({
            title: '加載遠程頁面',
            message: function (dialog) {
                var $message = $('<div></div>');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);
                return $message;
            },
            size: BootstrapDialog.SIZE_WIDE,
            cssClass: "fade",
            closeable: true,
            data: {
                'pageToLoad': '/Home/Load?msg=' + '我來自遙遠的地方...'
            }
        });
    });
</script>
}

6.Home控制器Load方法

public PartialViewResult Load(string msg)
        {
            return PartialView("LoadPartial", msg);
        }

view:

@model string
<h2>這是遠程加載的局部頁</h2>
<p>@Model</p>

 7.封裝BootstrapDialog

function ShowDailog(title,url,success) {
    BootstrapDialog.show({
        title: title,
        type: BootstrapDialog.TYPE_DEFAULT,
        size: BootstrapDialog.SIZE_WIDE,
        cssClass: "fade",
        closeable: true,
        message: function (dialog) {
            var $message = $('<div></div>');
            var pageToLoad = dialog.getData('pageToLoad');
            $message.load(pageToLoad);
            return $message;
        },                  
        data: {
            'pageToLoad': url,
        },
        buttons: [{
            label: '<i class="fa fa-close"></i> 取消',
            action: function (dialog) {
                dialog.close();
            }
        }, {
            label: '<i class="fa fa-check"></i> 確定',
            cssClass: 'btn btn-primary',
            action: function (dialog) {
                success(dialog);
            }
        }]
    });
}

8.調用封裝的ShowDailog

function AddMemberSales(t) {
        var $this = $(t);
        var type = @((int)PositionType.Member);
        var parentId =$this.data('key');     
        var url = '@Url.Action("AddSalesPerson","PersonStruct")?type=' + type + '&parentId=' + parentId;      
        ShowDailog('添加銷售人員', url,
           function (dailog) {
               var data = $('#team').serialize();
               $.ajax({
                   type: "POST",
                   url: "@Url.Action("AddSalesPerson", "PersonStruct")",
                   data: data,
                   dataType: "json",
                   success: function (result) {
                       if (result.Succeeded) {
                           toastr.success("添數據成功！")
                           setTimeout(function () {
                               //self.location.reload(true);
                               toastr.clear();
                           }, 1000);
                           $("#squadMemberTmpl").tmpl(result.ReturnValue).insertBefore($this);
                           
                       }
                       else {
                           toastr.error(result.ErrorMessage)
                       }
                   },
                   error: function () {
                       toastr.error('未知異常導致請求失敗,請重試.')
                   }
               });
               dailog.close();
           });       
    }