写在前面：

　　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. 解决使用Oracle数据库，项目启动由于表原因无法成功启动问题

    1.仔细看异常信息,如果出现一个  翻译过来是 不仅仅这一张表,那就说明,在连接数据库,定位到表的时候有多张表,不知道连哪一张. 原因: 有多个用户,这两个用户下有相同的表. 就算是在不同的表空间也不 ...

  2. sources.ustc.debian

    deb http://mirrors.ustc.edu.cn/debian/ jessie main contrib non-free deb-src http://mirrors.ustc.edu. ...

  3. c++知识点总结--new的一些用法

    new operator 将对象产生与heap,不但分配内存而且为该对象调用一个constructor   operator new只是分配内存,没有constructor被调用 有个一个特殊版本,称 ...

  4. HDU 1532 基础EK Drainage Ditches

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. Struts2的result返回类型

  6. 使用python读取mysql数据库并进行数据的操作

    (一)环境的配置 使用python调用mysql数据库要引进一些库. 目前我使用的python版本是python3.6.引进库为pymysql 其他对应的库可以有以下选择: mysqldb,oursq ...

  7. [bzoj] 1043 下落的圆盘 || 圆上的“线段覆盖”

    原题 n个圆盘,求下落后能看到的总周长. 红色即为所求 借鉴于黄学长的博客 对于每下落的一个圆盘,处理他后面的圆盘会挡住哪些区域,然后把一整个圆(2\(/pi\))当做一整个区间,每个被覆盖的部分都可 ...

  8. PL/SQL 查询结果集直接修改数据

    使用t.rowid,查询可以直接在查询结果中修改提交 SELECT t.rowid,t.* from  UC_ROLE t where ROLE_NAME like '% %'

  9. 让DIV的滚动条自动滚动到最底部 - 3种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  10. 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式

    如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下Jetty.Tomcat和Mina有关NIO的源码,发现大伙都基于类似的方式,我感觉这应该算是NIO构架网络服务器的经典模式 ...