bootstrap 模态

<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

调用

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

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