Bootstrap melaksanakan kemahiran pop timbul dan seret effect_javascript

Kadang-kadang saya berasa agak selesa untuk membangunkan beberapa kesan khas. Saya boleh mengendalikan halaman web anda seperti komputer saya sendiri.

Di sini, kami tidak menggunakan kaedah pembukaan statik, rendah..., 1. Tambah pautan untuk mencetuskan dan membuka butang 2. Tulis skrip js pembukaan dinamik 3. Tulis kandungan perantaraan modal; menyeret Effect; 5. Buka berbilang modal dan panggil dragModal(new Array('modalId1','modalId2'));

1. Tambahkan pautan untuk mencetus dan membuka butang:

<a href="javascript:;" title="开关" class="open-modal-dynamic" url="index.php&#63;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. Tulis skrip js pembukaan dinamik:

//打开弹窗
  $('.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. Tulis kandungan perantaraan 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&#63;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. Tambah kesan seret:

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. Buka berbilang modal dan panggil dragModal(new Array('modalId1','modalId2'));

Seluruh proses adalah seperti ini, sila rujuk jika perlu!