<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>  //这个js里主要是需要用到jquery.ui.draggable.js,但是这个js需要依赖其他的js,所以我直接上jquery-ui的官网上根据自己的需要生成

这样子，一个基本的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;}

　　由于我需要用到很多不同的模态框，打开和关闭的时候都需要执行一些动作

/** * 初始化模态窗口 * @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);  }

　　Bootstrap模态框水平垂直居中与增加拖拽功能

http://www.panshy.com/articles/201509/webdev-2524.html

　　Bootstrap 模态框（Modal）插件

http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-modal-plugin.html

调用

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

1 modalInit("demoModal", null,null);