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

有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用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成
      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 < 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'));

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