bootstrap實現彈窗和拖動效果，bootstrap彈窗拖動

bootstrap實現彈窗和拖動效果，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 modal    dragModal('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 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'));

整個過程即是如此，有需要的，就參考參考吧！

您可能感興趣的文章:

• js退出彈窗代碼集合
• js 右下角彈窗效果代碼(IE only)
• js彈窗代碼 可以指定彈出間隔
• js點擊彈出div層實現可拖曳的彈窗效果
• 原生JS可拖動彈窗效果執行個體代碼
• js彈窗傳回值詳解(window.open方式)
• 全面解析Bootstrap彈窗的實現方法