JavaScript：bootstrap 模态框的简单应用

最近用上了bootstrap这个强大的前端框架，有空来总结一下。这里记录下模态框的简单应用。

首先，要在页面中引入相应的js、css文件

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>  //这里如果只用到bootstrap的模态框的话，可以换成model.js
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>  //这个js里主要是需要用到jquery.ui.draggable.js,但是这个js需要依赖其他的js,所以我直接上jquery-ui的官网上根据自己的需要生成

然后在html里写一个模态框的实例，内容写在class="modal-body"这个div里。

<!-- 点击触发模态框 -->
    <button id="demo_button" type="button" class="btn btn-default" data-toggle="modal" data-target="#demoModal" style="width:80px;height:36px;">点击我</button>
    <!-- 模态框（Modal）-->
    <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="demoModalLabel">这是标题</h4>
                </div>
                <div class="modal-body" style="height: 320px;">
                    <form action="" method="post" id="userForm">
                        
                    </form>
                </div><!-- /.modal-body -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveOrUpdateUser()">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

触发modal有2种方式，一种就是上面给div添加2个属性  data-toggle="modal" data-target="#demoModal" 或者 href="#demoModel" 其中#demoModel是要弹出的模态框的id。另一种方式是用js控制：$('#demoModal').modal('show');

说一下一些比较重要的属性：

  id：模态框的id。
  aria-labelledby：该属性引用模态框的标题
  aria-hidden：true 用于保持模态窗口不可见，直到触发器被触发为止，比如上面的button
  data-backdrop：static 表示点击遮罩层不关闭模态窗口

---

这样子，一个基本的bootstrap模态框就写好了，但是现在的模态框只是水平居中，而且是不能拖拽的，所以还要进行一些处理。

//设置模态框可移动 这里用到上面引入的jquery-ui-custom.min.js
$(#id).draggable({   
    handle: ".modal-header",   
    cursor: 'move',   
    refreshPositions: false
});
            
            
//模态框居中显示
function centerModals() {   
    $(#id).each(function(i){  
        var $clone = $(this).clone().css('display', 'block').appendTo('body');
        //设置modal垂直居中
        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
        top = top > 0 ? top : 0;   
        $(this).find('.modal-content').css("margin-top", top);
        $clone.remove();
       
    });
}

$(window).on('resize', centerModals);  

还要修改bootstrap.css中的一个样式

.modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #000;
}

改为：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #000;
}

---

 

这里是一些可与 modal() 一起使用的有用的方法。

这里是一些可用的事件

由于我需要用到很多不同的模态框，打开和关闭的时候都需要执行一些动作，所以稍微做了下封装。。。

/**
 * 初始化模态窗口
 * @param modalName 模态窗口id
 * @param showBcak show时执行的方法
 * @param hideBcak hide时执行的方法
 */
function modalInit(modalName,showBcak,hideBcak)
{
    var modalName = '#' + modalName;
    //设置模态框可移动
    $(modalName).draggable({   
        handle: ".modal-header",   
        cursor: 'move',   
        refreshPositions: false
    });
    
    
    //模态框居中显示
    function centerModals() {   
        $(modalName).each(function(i){  
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            //设置modal垂直居中
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
            top = top > 0 ? top : 0;   
            $(this).find('.modal-content').css("margin-top", top);
            $clone.remove();
           
        });
    }
    //调用show方法时触发
    $(modalName).on('show.bs.modal', function(){
        if (null != showBcak && "" != showBcak) {
            var funcBack = eval(showBcak);
            new funcBack();
        }
        centerModals();
    });
    //调用hide方法时触发
    $(modalName).on('hide.bs.modal', function(){
        if (null != hideBcak && "" != hideBcak)
        {
            var funcBack = eval(hideBcak);
            new funcBack();
        }
        
    });
    $(window).on('resize', centerModals);  
}

调用

modalInit("demoModal", null,null);

---

附件：

　　https://files.cnblogs.com/files/zzd-zxj/model.rar

参考资料：

　　Bootstrap模态框水平垂直居中与增加拖拽功能
http://www.panshy.com/articles/201509/webdev-2524.html
　　Bootstrap 模态框（Modal）插件
http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-modal-plugin.html