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();
                           }, );
                           $("#squadMemberTmpl").tmpl(result.ReturnValue).insertBefore($this);

                       }
                       else {
                           toastr.error(result.ErrorMessage)
                       }
                   },
                   error: function () {
                       toastr.error('未知异常导致请求失败,请重试.')
                   }
               });
               dailog.close();
           });
    }