写在前面：

　　bootstrap本身提供了它自己的模态框，但是感觉并不太友好，当需要在页面点击一个按钮打开一个窗口页面时，使用原有的bootstrap的模态框，会把所有的代码全部写在一个jsp页面，显得比较不好分离。所以最后还是选择使用了基于bootstrap的一个对话框插件bootstrap-dialog(对bootstrap的模态框进行的封装).这里简单记录一下自己认为常用的功能吧。

　　还是来看看代码吧，下面的代码实现的功能是，点击按钮，以对话框的形式打开一个jsp页面，然后可以点击‘关闭按钮’关闭对话框，然后点击‘Save’按钮后，会弹出成功的提示框，一秒后自动关闭。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%

  String scheme = request.getScheme();

  String serverName = request.getServerName();

  String contextPath = request.getContextPath();

  int port = request.getServerPort();

  //网站的访问跟路径

  String baseURL = scheme + "://" + serverName + ":" + port

          + contextPath;

  request.setAttribute("baseURL", baseURL);

  System.out.println("baseURL:" + baseURL);

%>

<html>

  <head>

    <meta name="viewport" content="width=device-width" />

    <title>bootstrap-select测试</title>

    <%--导入bootstrap与dialog样式--%>

    <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap-dialog/css/bootstrap-dialog.css"  />

    <%--先导入jqury插件--%>

    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>

    <%--导入bootstrap插件--%>

    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>

    <%--导入对话框插件--%>

    <script src="${baseURL}/Bootstrap/bootstrap-dialog/js/bootstrap-dialog.js"></script>

    <style type="text/css">

        /*设置当打开的jsp页面高度太大，可以设置对话框有滚动条*/

        .modal{

          display: block !important;

        }

        .modal-dialog{

          overflow-y: initial !important

        }

        .modal-body{

          /*这里不能直接写死height，最好使用max-height,不然后面的成功对话框的高度也会变*/

          max-height: 400px;

          overflow-y: auto;

        }

    </style>

  </head>

  <body>

    <input id="create_person" type="button" value="Create" style="background-color: #fac090;width: 80px;text-align: center" />

  </body>

<script>

    $(function(){

        //创建按钮

        $("#create_person").click(function(){

            //创建打开对话框

            var createDialog = BootstrapDialog.show({

                title: 'Create',

                size: BootstrapDialog.SIZE_NORMAL,//对话框大小

                closable: true,//是否显示"x"可以来关闭对话框，默认为false

                draggable: true,//是否可以拖拽对话框，默认为false

                closeByBackdrop: false,//点击空白处是否可以关闭对话框,默认为true

                closeByKeyboard: false,//是否可以使用键盘esc键关闭对话框，默认为true

                //这里加载的是你要打开的jsp页面

                message: $('<div></div>').load('${baseURL}/profile/person_create.jsp'),

                //关闭对话框总会执行的事件

                onhide : function(){

                    //关闭对话框总会刷新页面

                    window.location.reload();

                },

                buttons : [

                  {// 设置关闭按钮

                    label : '关闭',

                    action : function(dialogItself) {

                        //点击“关闭”按钮 要执行的内容

                        dialogItself.close();

                    }

                  },

                  //自定义自己的按钮

                  {

                    label : 'Save',

                    action : function(dialogItself) {

                        //点击“Save”按钮要执行的内容

                        //这里根据自己的项目需求来

                        //这里点击Save按钮后 弹出提示框

                        var tip = BootstrapDialog.show({

                            id : "tip",

                            type : BootstrapDialog.TYPE_SUCCESS,//对话框类型

                            title : '成功',

                            message : "Saved Successfully",

                            size : BootstrapDialog.SIZE_SMALL,

                            buttons : [ {

                                label : '确定',

                                action : function(dialogItself) {

                                    dialogItself.close();

                                }

                            } ],

                            // dialog加载完成后触发事件

                            onshown : function(dialogRef) {

                                //指定时间内可自动关闭

                                setTimeout(function() {

                                    //1秒后 两个提示框都关闭

                                    dialogRef.close();

                                    createDialog.close();

                                }, 1000);

                            },

                        });

                    }

                  }

                ],

                id:"myDialog"

            });

        });

    });

</script>

</html>

　    一定不要忘记首先导入相关的js插件后再进行开发，代码其实也不难，主要是这个比较适用于我的项目，所以记录下来。然后也给需要相同需求的人，一些参考。

　　对于如果在父页面获取加载的子页面的组件，这个直接获取就好，这个时候把他们看成是在同一个页面。所以对于子页面组件的获取，直接获取就好。然后还要注意一点，在子页面中，刚开始使用了bootstrap-select插件，最后发现，模态框与下拉框组件一起使用时多少都有点问题，导致最后没有使用相关下拉框插件，而是直接使用的原始html的下拉框来做的。所以在使用的时候要注意一下。

　　下面看下效果图：

基于Bootstrap的对话框插件bootstrap-dialog的更多相关文章

  1. bootstrap-paginator基于bootstrap的分页插件

    bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...

  2. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  3. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

  4. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  5. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  6. Bootstrap 框架、插件

    Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自 ...

  7. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  8. Bootstrap Paginator分页插件使用示例

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...

  9. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

随机推荐

  1. php中变量的详细介绍

    变量的含义: 用于存储信息的容器,在程序运行期间,可以变化的量 变量的命名规则: 1.变量以$符开始 2.变量名只能以字母或下划线开始 3.变量名只能是字母,下划线,数字,不能有特殊字符:逗号,句号, ...

  2. Linux特殊权限位

    SUID 运行某程序时,相应进程的属主是程序文件自身的属主,而不是启动者(启动者临时获得文件属主的权限)     chmod u+s file     chmod u-s file SGID 运行某程 ...

  3. 解压大文件提示C盘空间不够的问题

    问题说明 今天在服务器解压一个之前上传的数据,大概有180GB,虽然当前盘还有984GB的富余. 但是当我选择解压到当前文件夹时,解压到半路还是提醒C盘的空间不足. 原理 压缩文件解压会在C盘创建一个 ...

  4. beta版本前准备

    目录 过去存在的问题 任务分工 开发规范 后端总结 卉卉 家灿 前端总结 绪佩 青元 恺琳 宇恒 丹丹 算法&API接口 家伟 鸿杰 一好 文档&博客撰写 政演 产品功能 我们已经做了 ...

  5. htmlagilitypack解析html

    这是个很好的的东西,以前做Html解析都是在用htmlparser,用的虽然顺手,但解析速度较慢,碰巧今天找到了这个,就拿过来试,一切出乎意料,非常爽,推荐给各位使用. 下面是一些简单的使用技巧,希望 ...

  6. SQLEXPRESS 2012 安装NorthWind和Pub数据库

    安装SQL后,学习时总是没有这两个示例数据库. 先从微软那里下载此文件. 网址:http://www.microsoft.com/en-us/download/details.aspx?id=2365 ...

  7. EXTJS4.0 form 表单提交 后 回调函数 不响应的问题

    在提交表单后,应返回一个 JSON 至少要包含{success:true} 否则,EXT 不知道是否成功,没有响应. {success:true,msg:'成功',Url:'http://www.ba ...

  8. 利用VS2013 XSLT对 XML进行转换

    1.打开VS2013 2.文件-->新建-->文件-->XML文件 3.文件-->新建-->文件-->XSLT文件 4.CTRL+SHIFT+S 保存2个文件位置 ...

  9. HCNA--tcp/ip基础

    1.OSI七层参考模型 应用层 7 表示层 6  高层:负责主机之间的的数据传输 会话层 5 传输层 4 主机之间端到端的连接 tcp /udp segment 网络层 3 路由 寻址  packet ...

  10. mysql如何更改character-set-server默认为latin1

    运行环境:win10 mysql版本:MYSQL5.7免安装版(或解压版) 今天在学习mysql字符集有关乱码的知识 然后发现了latin1的字符集编码格式,虽然命令行窗口改变很容易,只需两行命令 s ...