有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用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 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'));
整个过程即是如此，有需要的，就参考参考吧！