<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> <!-- 打開容器 -->　　

//打開彈窗 $('.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'); 

<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> 

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