bootstrap实现弹窗和拖动效果

有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！
这里，我们不使用静态打开的的方式，low...,1、添加一个a链接触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal（new Array（"modalId1","modalId2"））;
1、添加一个a链接触发，打开按钮：

<a href="javascript:;" title="开关" class="open-modal-dynamic" url="index.php?m=index&c=cc&a=aa&id=22" alert="1" divid="editModal">打开modal<a><div id="addModal" class="modal hide fade" style="max-width:800px;" data-backdrop="static"></div><！-- 打开容器 -->

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中间内容：

<style>.line{margin-bottom: 5px;}.line .left{width: 100px;text-align:right;display:block;}.form-button{padding:2px 10px;background:#73A86A;color:#ffffff;border:none;}.form-button:hover{background:#146206;}</style><div class="modal-header"><a class="close" title="关闭小窗口" data-dismiss="modal">×</a><h3>modal window<h3></div><div class="modal-body" style="padding-bottom: 5px;"><div class="line"><span class="left">脚本名称：</span><span> <select name="name"><option value="11">11</option> <option value="22">22</option></select></span></div><div class="line"><span class="left">日期：</span><span style="word-break:break-all;" title="的时间"><input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" /></span></div><div class="line" title="设置"><span class="left">是否停止：</span><span><label><input type="radio" name="is_del_add" value="1" />强制停止</label><label><input type="radio" name="is_del_add" value="0" />正常处理</label></span></div><div class="line" title="按照实际情况允许进行模拟更改"><span class="left">执行情况：</span><span><label><input type="radio" name="status_add" value="5" onclick="javascript:return confirm（"你确定要操作该状态吗，这是系统的操作，请确认？"）;" />11</label><label><input type="radio" name="status_add" value="1" onclick="javascript:return confirm（"你确定要操作该状态吗，这是系统的操作，请确认？"）;" />22成</label><label><input type="radio" onclick="javascript:return confirm（"你确定要操作该状态吗，这是系统的操作，请确认？"）;" name="status_add" value="2"/>223行</label><label><input type="radio" onclick="javascript:return confirm（"你确定要操作该状态吗，这是系统的操作，请确认？"）;" name="status_add" value="0" />445</label><label><input type="radio" onclick="javascript:return confirm（"你确定要操作该状态吗，这是系统的操作，请确认？"）;" name="status_add" value="4"/>55失败</label></span></div><div class="line"><span>操作说明：</span><textarea name="memo" id="memo" cols="100" rows="1" style="width:370px;></textarea></div><div class="line" style="text-align:center;"><input type="button" value="提交" class="form-button" id="submit2" /><input type="hidden" id="id_add" value="22" /></div></div><div class="modal-footer"><span class="loading"></span><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button></div><script src="/js/dragModal.js"></script><script>$（function（）{$（"#submit2"）.off（）.on（"click", function（）{var status = $（"input[name=status_add]:checked"）.val（）,memo = $（"#memo"）.val（）,id = parseInt（$（"#id_add"）.val（））,is_del = $（"input[name=del_add]:checked"）.val（）,cron_name = $（"#name_add"）.val（）,cron_date = $（"#date_add"）.val（）,url ="index.php?m=xx&c=xx&a=";if（！memo）{alert（"请填写操作备注，如不处理，请直接关闭对话框！"）;return false;}$.post（url, {status: status, cron_name:cron_name, memo: memo, id: id, cron_date: cron_date, is_del: is_del}, function（data）{if（data.status == 1）{alert（data.info）;window.location.reload（）;}else{alert（data.info）;}}, "json"）}）; }）;//drag effects begin, define the global variables to receive the changes,because of the different function of the modaldragModal（"editModal"）;</script>

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 beginvar 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"））;
整个过程即是如此，有需要的，就参考参考吧！