bootstrap使用之多个弹窗和拖动效果[开发篇]

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

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

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

　　　　

?

1 2	<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脚本：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//打开弹窗     $('.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中间内容：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

<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 modal         dragModal('editModal'); </script>

 　　　　4、添加拖动效果：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

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'));

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