bootStrap模态框

1、在js文件夹里面新建bootstrap-dialog.js文件

2、粘贴下列代码

(function($) {
    window.Bootstrap = function() {
        var tipHtml =
            '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
            '<div class="modal-dialog modal-sm">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>' +
            '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
            '</div>' +
            '<div class="modal-body">' +
            '	<p>[Message]</p>' +
            '</div>' +
            '<div class="modal-footer">' +
            '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[CancelBtn]</button>' +
            '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[OkBtn]</button>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';

        var dialogHtml =
            '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
            '<div class="modal-dialog">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>' +
            '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
            '</div>' +
            '<div class="modal-body">' +

            '</div>' +
            '<div class="modal-footer">' +
            '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[CancelBtn]</button>' +
            '<button type="button" class="btn btn-primary ok">[OkBtn]</button>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
        var generateId = function() {
            var date = new Date();
            return 'modal' + date.valueOf();
        }

        return {
            tip: function(options) {
                if(typeof options == 'string') {
                    options = {
                        message: options
                    };
                }
                options = $.extend({}, {
                    title: "提示",
                    message: "提示内容",
                    timeout: 3000 //设置提示框多长时间自动消失（单位：毫秒）
                }, options || {});
                var modalId = generateId();
                var content = tipHtml.replace(reg, function(node, key) {
                    return {
                        Id: modalId,
                        Title: options.title,
                        Message: options.message
                    }[key];
                });

                $('body').append(content);

                var $modal = $('#' + modalId);

                $modal.modal({
                    backdrop: 'static'//用户点击模态框外部时不会关闭模态框
                });
                $modal.on('hide.bs.modal', function(e) {//模态框关闭时触发该事件
                    $('body').find('#' + modalId).remove();
                });
                $modal.find('.ok').hide();
                $modal.find('.cancel').hide();

                setTimeout(function(){
                    $modal.modal('hide');
                },options.timeout);
            },

            alert: function(options) {
                if(typeof options == 'string') {
                    options = {
                        message: options
                    };
                }

                options = $.extend({}, {
                    title: "提示",
                    message: "提示内容",
                    okValue: "确定"
                }, options || {});
                var modalId = generateId();
                var content = tipHtml.replace(reg, function(node, key) {
                    return {
                        Id: modalId,
                        Title: options.title,
                        Message: options.message,
                        OkBtn: options.okValue
                    }[key];
                });
                $('body').append(content);

                var $modal = $('#' + modalId);
                $modal.modal({
                    backdrop: 'static'//用户点击模态框外部时不会关闭模态框
                });
                $modal.on('hide.bs.modal', function(e) {//模态框关闭时触发该事件
                    $('body').find('#' + modalId).remove();
                });

                $modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
                $modal.find('.cancel').hide();
            },

            confirm: function(options) {
                options = $.extend({}, {
                    title: "操作提示",
                    message: "提示内容",
                    okValue: "确定",
                    cancelValue: "取消"
                }, options || {});
                var modalId = generateId();
                var content = tipHtml.replace(reg, function(node, key) {
                    return {
                        Id: modalId,
                        Title: options.title,
                        Message: options.message,
                        OkBtn: options.okValue,
                        CancelBtn: options.cancelValue
                    }[key];
                });
                $('body').append(content);

                var $modal = $('#' + modalId);
                $modal.modal({
                    backdrop: 'static'//用户点击模态框外部时不会关闭模态框
                });
                $modal.on('hide.bs.modal', function(e) {//模态框关闭时触发该事件
                    $('body').find('#' + modalId).remove();
                });

                $modal.find('.ok').removeClass('btn-primary').addClass('btn-success');

                return {
                    id: modalId,
                    ok: function(callback) {//点击ok按钮时触发的方法
                        if(callback && callback instanceof Function) {
                            $modal.find('.ok').click(function() {
                                callback(true);
                            });
                        }
                    },
                    cancel: function(callback) {//点击cancel按钮时触发的方法
                        if(callback && callback instanceof Function) {
                            $modal.find('.cancel').click(function() {
                                callback(false);
                            });
                        }
                    },
                    hide: function(callback) {//模态框隐藏时触发的方法
                        if(callback && callback instanceof Function) {
                            $modal.on('hide.bs.modal', function(e) {
                                callback(e);
                            });
                        }
                    }
                };
            },

            dialog: function(options) {
                options = $.extend({}, {
                    title: '提示',
                    url: '',
                    okHide: false,
                    okValue: "确定",
                    cancelValue: "取消",
                    onOK:function() {},
                    onCancel: function() {}
                }, options || {});
                var modalId = generateId();

                var content = dialogHtml.replace(reg, function(node, key) {
                    return {
                        Id: modalId,
                        Title: options.title,
                        OkBtn: options.okValue,
                        CancelBtn: options.cancelValue
                    }[key];
                });
                $('body').append(content);

                var $modal = $('#' + modalId);

                $modal.modal({
                    backdrop: 'static'//用户点击模态框外部时不会关闭模态框
                });
                $modal.on('hide.bs.modal', function(e) {//模态框关闭时触发该事件
                    $('body').find('#' + modalId).remove();
                });

                $modal.find('.modal-body').load(options.url);

                if(options.okHide){
                    $modal.find('.ok').hide();
                    $modal.find('.cancel').removeClass('btn-default').addClass('btn-success');
                }else{
                    $modal.find('.ok').click(options.onOK);
                }
                $modal.find('.cancel').click(options.onCancel);

                return $modal;
            }
        }
    }();
})(jQuery);

3、在需要引入的页面引入代码：

<script src="js/bootstrap-dialog.js"></script>

4、复制增删改查方法到方法中

<script>
			function happy(){
				Bootstrap.tip("操作成功");
			}
			function logout(){
				Bootstrap.alert("成功退出系统！");
			}
			
			function drop(){
				var tip = Bootstrap.confirm({ message: "确认要删除选择的数据吗？" });
				tip.ok(function () {
	                console.log("确定");
	            });
	            tip.cancel(function () {
	                console.log("取消");
	            });
			}
			
			function update(){
				var dialog = Bootstrap.dialog({
					title: '修改密码',
					url: './updateFrag.html',
					onOK: function() {
						console.log("点击确定按钮");
						dialog.modal('hide');//隐藏模态框
					},
					onCancel: function() {
						console.log("点击去掉按钮");
					}
				});
			}
			
			function view(){
				Bootstrap.dialog({
					title: '查看',
					okHide: true,
					cancelValue: "关闭",
					url: './viewFrag.html'
				});
			}
		</script>

3、使用模态框更新数据

1、使用update方法

function update(id) {
                var dialog = Bootstrap.dialog({
                    title: '修改学生信息',
                    url: './StudentUpdateServlet?id='+id,
                    onOK: function() {

                    },
                });
            }

url只要请求数据的地址，在请求的数据地址中返回到Update页面，然后将那个页面的HTML代码填充进模态框中

2、StudentUpdateServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        iStudentService = new StudentService();
        Student student = iStudentService.getStudentById(id);
        System.out.println(student.toString());
        request.setAttribute("student",student);
        request.getRequestDispatcher("studentUpdate.jsp").forward(request,response);
    }

3、返回到studentUpdate.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<form id="updateStudent">
    ID:<input type="hidden" name="id" value="${student.id}"><br>
    姓名:<input name="name" value="${student.name}"><br>
    年龄:<input name="age" value="${student.age}"><br>
    电话:<input name="mobile" value="${student.mobile}"><br>
    地址:<input name="address" value="${student.address}"><br>
</form>

修改数据点击确认会触发onOK()方法

4、使用序列化方法获取form表单内容：

var values = $("#updateStudent").serialize();

5、思路，使用servlet中的get方法查询出数据返回到模态框中，然后修改数据后提交，提交到post方法中进行修改操作。

6、post方式：

OnOK方法：

 function update(id) {
                var dialog = Bootstrap.dialog({
                    title: '修改学生信息',
                    url: './StudentUpdateServlet?id='+id,
                    onOK: function() {
                        var values = $("#updateStudent").serialize();
                        var object={
                            url:"./StudentUpdateServlet",
                            type:"post",
                            data:values,
                            success:function(data) {
                                console.log(data);
                                if(data=="1")
                                {
                                    dialog.modal('hide');
                                    search();
                                    return;
                                }else{
                                    alert("系统正忙，请稍后再试！");
                                    dialog.modal('hide');
                                    search();
                                }
                            }
                        }
                        $.ajax(object);
                        },
                });
            }

OnOK使用ajax将object内容异步传输，转到URL中
URL：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String mobile = request.getParameter("mobile");
        String address = request.getParameter("address");
        Student student = new Student(id,name,age,mobile,address);
        System.out.println(student);
        IStudentService iStudentService = new StudentService();
        int result = iStudentService.updateStudent(student);
        PrintWriter out = response.getWriter();
        out.write(result+"");//注意：Post方法返回一定是字符串，数值类型不能识别
        out.flush();
        out.close();
    }

注意ajax的Post方法中后面的几步方法：

int result = iStudentService.updateStudent(student);
        PrintWriter out = response.getWriter();
        out.write(result+"");//注意：Post方法返回一定是字符串，数值类型不能识别
        out.flush();
        out.close();

是要返回值，而且要将返回的值写入到writter方法中，而且写入的一定要是String类型的，Int类型的会出错。
因为值很少，就一个1，所以要用flush()清空缓存，全部输出
关闭