bootstrap实现弹窗和拖动效果_javascript技巧

打开modal
  　　

  ×
  
modal window



  

    脚本名称：
    
   
  11
   22
    
    
  
  

    日期：
    
      
    
  
  

    是否停止：
    
      强制停止
      正常处理
    
  
  

    执行情况：
    
      11
      22成
      223行
      445
      55失败
    
  
  

    操作说明：
        <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>  
</script></pre>
</div>
<p><strong>4、添加拖动效果：</strong></p>
<div class="jb51code">
<pre class="brush:js;"><script type="text/html" style='display:block'>
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;
      });
    });
 
  }
}


</script></pre>
</div>
<p><strong>5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));</strong></p>
<p>整个过程即是如此，有需要的，就参考参考吧！  </div>

  </div>

<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
  
layui.code({
  elem: 'pre', //默认值为.layui-code
  about:false,
  title:'bootstrap实现弹窗和拖动效果_javascript技巧代码块',
  encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
           <ul class="channels">
              <li>
                <a target="_top" href="/system/">操作系统</a>
            </li><li>
                <a target="_top" href="/down/">程序下载</a>
            </li><li>
                <a target="_top" href="/jquery/">jquery插件库</a>
            </li><li>
                <a target="_top" href="/jiaoben/">编程</a>
            </li><li>
                <a target="_top" href="/db/">数据库</a>
            </li><li>
                <a target="_top" href="/tools/">在线工具</a>
            </li><li>
                <a target="_top" href="/framebook/">框架书籍</a>
            </li><li>
                <a target="_top" href="/xitongjiaocheng/">系统教程</a>
            </li><li>
                <a target="_top" href="/ruanjianxiazai/">软件下载</a>
            </li>            </ul>
            <ul class="versions">
            <li>
                <a href="https://m.gxlcms.com" class="active">触屏版</a>
            </li>

            <li>
                <a href="https://www.gxlcms.com" target="_top">电脑版</a>
            </li>
            </ul>
           
              
     
        <p><a href="https://beian.miit.gov.cn/" target="_blank"  style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></p>
        </footer>	

</body>
</html>