有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！

　　　　这里，我们不使用静态打开的的方式，low...,1、添加一个a链接 触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));

　　　　1、添加一个a链接 触发，打开按钮：

　　　　

打开modal
      
    
      

　　

 　　　　2、编写动态打开js脚本：

　　　　//打开弹窗        $('.open-modal-dynamic').on('click', function(){            var modalId = $(this).attr('divid') ? $(this).attr('divid') : 'Modal', url = $(this).attr('url');            $.get(url, function(data){                if(data.status == 1){                    //禁止选择文字，在拖动时会有影响                    $('html').off('selectstart').on('selectstart', function(){return false;});                    $('#' + modalId).html(data.htmlData);                    $('#' + modalId).modal({'show':true});                }else{                    alert(data.info);                }            }, 'json');

 　　　　3、编写modal中间内容：

     
    
      ×    
      
modal window
      
     
     
    
      
        
       脚本名称：        
             	11	 22                   
      
    
      
        
       日期：        
                               
      
    
      
        
       是否停止：        
                   强制停止            正常处理            
      
    
      
        
       执行情况：        
                   11            22成            223行            445            55失败            
      
    
      
        
       操作说明：        
               
               
           
      
     
     
    
          
      关闭
     

 　　　　4、添加拖动效果：

var clicked = "0";var dif = {};;function dragModal(obj) {    if(clicked == undefined || obj == undefined || dif == undefined){        return false;    }    if(typeof obj == 'string')    {        obj = new Array(obj);    }    var modalNums = obj.length;    //drag effects begin    var i = 0;    for (i = 0; i < modalNums; i++) {        dif[obj[i]] = {'difx': 0, 'dify': 0};    }    $("html").off('mousemove').on('mousemove', function (event) {        if (clicked == "0") {            for (i = 0; i < modalNums; i++) {                dif[obj[i]].difx = event.pageX - $("#" + obj[i]).offset().left;                dif[obj[i]].dify = event.pageY - $("#" + obj[i]).offset().top;            }        }        if (clicked > 0 && clicked <= modalNums) {            var clickedObj = obj[clicked - 1];            var newx = event.pageX - dif[clickedObj].difx - $("#" + clickedObj).css("marginLeft").replace('px', '');            var newy = event.pageY - dif[clickedObj].dify - $("#" + clickedObj).css("marginTop").replace('px', '');            $("#" + clickedObj).css({top: newy, left: newx});        }    });    $("html").off('mouseup').on('mouseup', function (event) {        clicked = "0";    });    for(i = 0; i < modalNums; i++){        //注重此处不能直接传入i值，此处即为添加多窗口时的效果使用        $("#" + obj[i] + " .modal-header").off().on('mousedown',{index: i}, function (event) {            clicked = event.data.index + 1;        });        $("#" + obj[i] + " .modal-footer").off().on('mousedown', {index: i}, function (event) {            clicked = event.data.index + 1;        });        $('#' + obj[i]).on('hide.bs.modal', function () {       //关闭时打开选中            $('html').off('selectstart').on('selectstart', function () {                return true;            });        });    }}

 　　　　5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));

　　　　整个过程即是如此，有需要的，就参考参考吧！