bootstrap实现弹窗和拖动效果

前端技术 2023/09/02 JavaScript

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

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

本文地址:https://www.stayed.cn/item/5959

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。