游客您好
第三方账号登陆
Lv.9 管理员
1366号会员,2042活跃度,2018/12/07 加入学习
  • 176发帖
  • 161主题
  • 2关注
  • 5粉丝
这个人很懒,什么也没有留下。
最新推荐更多

[Bootstrap] 经典bootstrap实现弹窗和拖动效果

[复制链接]
风起云甬 发表于 2020-12-31 11:42:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧!
这里,我们不使用静态打开的的方式,low...,1、添加一个a链接 触发,打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));
1、添加一个a链接 触发,打开按钮:
  1. <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>
  2. <div id="addModal" class="modal hide fade" style="max-width:800px;" data-backdrop="static"></div> <!-- 打开容器 -->  
复制代码
2、编写动态打开js脚本:
  1. //打开弹窗
  2. $('.open-modal-dynamic').on('click', function(){
  3.   var modalId = $(this).attr('divid') ? $(this).attr('divid') : 'Modal', url = $(this).attr('url');
  4.   $.get(url, function(data){
  5.    if(data.status == 1){
  6.     //禁止选择文字,在拖动时会有影响
  7.     $('html').off('selectstart').on('selectstart', function(){return false;});
  8.     $('#' + modalId).html(data.htmlData);
  9.     $('#' + modalId).modal({'show':true});
  10.    }else{
  11.     alert(data.info);
  12.    }
  13.   }, 'json');

复制代码
3、编写modal中间内容:
  1. <style>
  2. .line{margin-bottom: 5px;}
  3. .line .left{width: 100px;text-align:right;display:block;}
  4. .form-button{padding:2px 10px;background:#73A86A;color:#ffffff;border:none;}
  5. .form-button:hover{background:#146206;}
  6. </style>
  7. <div class="modal-header">
  8. <a class="close" title="关闭小窗口" data-dismiss="modal">×</a>
  9. <h3>modal window<h3>
  10. </div>
  11. <div class="modal-body" style="padding-bottom: 5px;">
  12. <div class="line">
  13.   <span class="left">脚本名称:</span>
  14.   <span>
  15.   <select name="name">
  16. <option value='11'>11</option>
  17.   <option value='22'>22</option>
  18.   </select>
  19.   </span>
  20. </div>
  21. <div class="line">
  22.   <span class="left">日期:</span>
  23.   <span style="word-break:break-all;" title="的时间">
  24.    <input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" />
  25.   </span>
  26. </div>
  27. <div class="line" title="设置">
  28.   <span class="left">是否停止:</span>
  29.   <span>
  30.    <label><input type="radio" name="is_del_add" value="1" />强制停止</label>
  31.    <label><input type="radio" name="is_del_add" value="0" />正常处理</label>
  32.   </span>
  33. </div>
  34. <div class="line" title="按照实际情况允许进行模拟更改">
  35.   <span class="left">执行情况:</span>
  36.   <span>
  37.    <label><input type="radio" name="status_add" value="5" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />11</label>
  38.    <label><input type="radio" name="status_add" value="1" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />22成</label>
  39.    <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="2"/>223行</label>
  40.    <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="0" />445</label>
  41.    <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="4" />55失败</label>
  42.   </span>
  43. </div>
  44. <div class="line">
  45.   <span>操作说明:</span>
  46.   <textarea name="memo" id="memo" cols="100" rows="1" style="width:370px;></textarea>
  47. </div>
  48. <div class="line" style="text-align:center;">
  49.   <input type="button" value="提交" class="form-button" id="submit2" />
  50.   <input type="hidden" id="id_add" value="22" />
  51. </div>
  52. </div>
  53. <div class="modal-footer">
  54. <span class="loading"></span>
  55. <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
  56. </div>
  57. <script src="/js/dragModal.js"></script>
  58. <script>
  59. $(function(){
  60.   $('#submit2').off().on('click', function(){
  61.    var status = $('input[name=status_add]:checked').val(),
  62.      memo = $('#memo').val(),
  63.      id = parseInt($('#id_add').val()),
  64.      is_del = $('input[name=del_add]:checked').val(),
  65.      cron_name = $('#name_add').val(),
  66.      cron_date = $('#date_add').val(),
  67.      url ='index.php?m=xx&c=xx&a=';
  68.    if(!memo){
  69.     alert('请填写操作备注,如不处理,请直接关闭对话框!');
  70.     return false;
  71.    }
  72.    $.post(url, {status: status, cron_name:cron_name, memo: memo, id: id, cron_date: cron_date, is_del: is_del}, function(data){
  73.     if(data.status == 1){
  74.      alert(data.info);
  75.      window.location.reload();
  76.     }else{
  77.      alert(data.info);
  78.     }
  79.    }, 'json')
  80.   });

  81. });
  82. // drag effects begin, define the global variables to receive the changes,because of the different function of the modal
  83.   dragModal('editModal');
  84. </script>
复制代码
4、添加拖动效果:
  1. var clicked = "0";
  2. var dif = {};
  3. ;function dragModal(obj) {

  4. if(clicked == undefined || obj == undefined || dif == undefined){
  5.   return false;
  6. }
  7. if(typeof obj == 'string')
  8. {
  9.   obj = new Array(obj);
  10. }
  11. var modalNums = obj.length;
  12. //drag effects begin
  13. var i = 0;
  14. for (i = 0; i < modalNums; i++) {
  15.   dif[obj[i]] = {'difx': 0, 'dify': 0};
  16. }
  17. $("html").off('mousemove').on('mousemove', function (event) {
  18.   if (clicked == "0") {
  19.    for (i = 0; i < modalNums; i++) {
  20.     dif[obj[i]].difx = event.pageX - $("#" + obj[i]).offset().left;
  21.     dif[obj[i]].dify = event.pageY - $("#" + obj[i]).offset().top;
  22.    }
  23.   }
  24.   if (clicked > 0 && clicked <= modalNums) {
  25.    var clickedObj = obj[clicked - 1];
  26.    var newx = event.pageX - dif[clickedObj].difx - $("#" + clickedObj).css("marginLeft").replace('px', '');
  27.    var newy = event.pageY - dif[clickedObj].dify - $("#" + clickedObj).css("marginTop").replace('px', '');
  28.    $("#" + clickedObj).css({top: newy, left: newx});
  29.   }

  30. });

  31. $("html").off('mouseup').on('mouseup', function (event) {
  32.   clicked = "0";
  33. });

  34. for(i = 0; i < modalNums; i++){
  35.   //注重此处不能直接传入i值,此处即为添加多窗口时的效果使用
  36.   $("#" + obj[i] + " .modal-header").off().on('mousedown',{index: i}, function (event) {
  37.    clicked = event.data.index + 1;
  38.   });
  39.   $("#" + obj[i] + " .modal-footer").off().on('mousedown', {index: i}, function (event) {
  40.    clicked = event.data.index + 1;
  41.   });
  42.   $('#' + obj[i]).on('hide.bs.modal', function () {  //关闭时打开选中
  43.    $('html').off('selectstart').on('selectstart', function () {
  44.     return true;
  45.    });
  46.   });

  47. }
  48. }


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

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





• 本内容来源互联网,如涉及版权问题请及时联系站长
• 为防止代码解析,除代码框内<>为正常,其余请重新替换<>尖括号

发布资源 快速回复 站点服务大厅 搜索 官方群