一、所需引入的js和css

<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.css" rel="external nofollow" > 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" > 
    
<script type="text/javascript" src="js/jquery-1.11.3.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/bootstrap-dialog.js"></script> 
//引入的顺序:先css,再js,引入js时，先jquery,再bootstrap-dialog.js

二、示例代码

添加：

  function addData(){
                BootstrapDialog.show({
                    title: '添加员工',//模态框的header
                    id:'addStaff',
                    message: function(dialog) {//是模态框的body部分，也就是我们需要弹出的页面,如修改的页面
                        var $message = $('<div></div>');
                        var pageToLoad = dialog.getData('pageToLoad');
                        $message.load(pageToLoad);
                        return $message;
                    },
                    data: {
                        'pageToLoad': "${path}/staff/addView.do",//指定message需要显示的页面访问路径
                    },
                    buttons: [
                        {
                            label: 'ok',
                            action: function(dialog){
                                var document = $(".modal-body");//通过class标签选择器，获得模态框的JQuery对象
                                var icon = $("[name='icon']",document).val();
                                var role = $("[name='role']",document).val();
                                var mode = $("[name='mode']",document).val();
                                var mobile = $("[name='mobile']",document).val();
                                var realName= $("[name='realName']",document).val();
                                var cityCode =$("#city option:selected",document).val();
                                var countyCode=$("#county option:selected",document).val();
                                var provinceCode=$("#province option:selected",document).val();
                                var object={
                                    url:"${path}/staff/add.do?cityCode="+cityCode+"&countyCode="+countyCode+"&provinceCode="+provinceCode,
                                    type:"post",
                                    data:$("form",document).serialize(),//序列化form表单的值
                                    success:function(data){
                                        if(data==0){
                                            BootstrapDialog.alert('<div class="alert alert-danger">数据添加失败</div>');
                                        }else{
                                           dialog.close();//关闭模态框
                                            BootstrapDialog.alert('<div class="alert alert-success">数据添加成功</div>');
                                        }
                                    }
                                };
                                $.ajax(object);
                                return false;
                            },
                        },
                        {
                            label: 'cancle',
                            action: function(dialog) {
                                dialog.close();
                            }
                        }]

                });
            }

删除：

     function deleteData(id){
                BootstrapDialog.show({
                    type : BootstrapDialog.TYPE_DANGER,
                    message: '你确定要删除吗？',
                    size : BootstrapDialog.SIZE_NORMAL,
                    buttons: [{
                        label: '确定',
                        action: function(dialog) {
                            var object = {
                                url:'${path}/staff/delete.do?id='+id,
                                type:"post",
                                success:function(data){
                                    if(data==1){
                                   
                                        BootstrapDialog.alert('<div class="alert alert-success">删除成功</div>');
                                    }else{
                                        BootstrapDialog.alert('<div class="alert alert-danger">删除失败</div>');
                                    }
                                }

                            };
                            $.ajax(object);
                            dialog.close();
                        }
                    }, {
                        label: '取消',
                        action: function(dialog) {
                            dialog.close();
                        }
                    }]
                });
            }

三、设置事件，即可

<button type="button" id="tm" class="btn btn-primary" nuoxin="margin: 100px;" onclick="addData()">添加</button>
<button type="button" id="tm" class="btn btn-primary" nuoxin="margin: 100px;" onclick="addData()">删除</button>